Question

I have a form that has a file input control:

<input type="file" onclick="this.blur()" name="descFile" />

So when the user selects a file, the path shows in the text input box (default browser behaviour), BUT, the business would like me to put a message in bold letters below that they have selected the file to be uploaded, prior to postback.

Is there a way using Javascript to somehow capture the “select” event from file input and display in bold letters below the file input?

Answer 1

$('input[name="descFile"]').change(function(){
   var filename = $(this).val();
   $('<label>Filename selected: '+ filename +'</label>').insertAfter($(this));
});

Remember to put it inside or similar to:

$(function(){ });