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?

Do you want to capture the filename, or just the fact that he selected a file? — Jonas Schmid, Jan 12 '11 at 19:04
Just that they selected a file. It's odd since I thought the browser control was intuitive enough, but I guess our users need more indication. — Mark Kadlec, Jan 12 '11 at 20:09

score 6 · Accepted Answer · answered Jan 12 '11 at 19:08

6

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

answered Jan 12 '11 at 19:08

dropson

1,111
2
12
23

Thanks, that works great. Not sure why the users need more of an indication, but that's how it goes. :) – Mark Kadlec Jan 12 '11 at 20:08

score 2 · Answer 2 · answered Jan 12 '11 at 19:07

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

answered Jan 12 '11 at 19:07

Wazy

8,822
10
53
98

1

You should give credit to the person who wrote this originally: http://stackoverflow.com/questions/1299052/jquery-get-the-file-name-selected-from-input-type-file – Adam Fratino Mar 27 '14 at 14:34

score 1 · Answer 3 · answered Jan 12 '11 at 19:06

1

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);
});

answered Jan 12 '11 at 19:06

Ivan Buttinoni

4,110
1
24
44

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

3 Answers3