How to capture the filename from a file input using jQuery?

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?

Solution 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(){ });

Solution 2

This can be done like this

$('input[type=file]').val()

Anyway, I suggest using name or ID attribute to select your input. And with event, it should look like this:

$('input[type=file]').change(function(e){
  $in=$(this);
  $in.next().html($in.val());
});

Solution 3

It's the value attrib of your input tag, if I understand your question.

$('#file_attach').change(function(){

        path=$(this).attr('value');
        start = path.lastIndexOf(".");
        alert("extention: "+start);
});