225

Possible Duplicate:
jQuery: get the file name selected from <input type=“file” />

I have a standard file input box

<input type="file" name="imafile">

I also have a bit of text down the page like so

<span class="filename">Nothing selected</span>

I was wondering if it is possible to have the text update with the name of the file selected in the file input box?

starball
  • 20,030
  • 7
  • 43
  • 238
BigJobbies
  • 4,293
  • 12
  • 42
  • 51
  • 4
    @jnpcl - I dont think that post is doing the same thing as what i want to do – BigJobbies Apr 14 '11 at 23:38
  • It displays the `filename` of the `` field. Isn't that **exactly** what you want to do? – drudge Apr 14 '11 at 23:47
  • 3
    He wants an event to fire *when* the user selects a file. This is distinctly different from getting the name after you *know* a file is selected. As such, this is not a duplicate. – user4593252 Jan 12 '16 at 19:32

2 Answers2

338

You should be able to attach an event handler to the onchange event of the input and have that call a function to set the text in your span.

<script type="text/javascript">
  $(function() {
     $("input:file").change(function (){
       var fileName = $(this).val();
       $(".filename").html(fileName);
     });
  });
</script>

You may want to add IDs to your input and span so you can select based on those to be specific to the elements you are concerned with and not other file inputs or spans in the DOM.

Clayton
  • 5,330
  • 1
  • 18
  • 15
  • 49
    `onchange` does not get called if the same file was selected again. How can I overcome this..? – shashwat Jan 29 '14 at 09:49
  • 2
    @shashwat You can use live instead of change to overcome this problem. Example: Change code from $("input:file").change to $("input:file").live – asim-ishaq Apr 01 '14 at 17:57
  • 12
    @shashwat bind to the click event of the input and set the inputs value to null. – Blake Plumb Jul 03 '14 at 21:24
  • @BlakePlumb, I don't believe you are able to update the value of the input as upload inputs are read-only (apart from what the user selects from the dialog box). Please correct me if I'm wrong though. – greggannicott Nov 11 '15 at 16:36
  • Thanks buddy. For those using requireJS - here is a flavor of this script: $("input:file").change(function () { var fileName = $(this).val(); alert(fileName); }); – Combine Mar 14 '16 at 06:47
  • 3
    @shashwat you can add `$(this).val('');` after each use – Anouar khaldi Jun 12 '18 at 02:24
  • Also remember to bind to the click event of the app and set $(this).val(''), to reset the input incase you want to reselect the same file – James Ikubi Nov 05 '20 at 21:08
13

I'd suggest try the change event? test to see if it has a value if it does then you can continue with your code. jQuery has 

.bind("change", function(){ ... });

Or

.change(function(){ ... });

which are equivalents.

http://api.jquery.com/change/

for a unique selector change your name attribute to id and then jQuery("#imafile") or a general jQuery('input[type="file"]') for all the file inputs

James Khoury
  • 21,330
  • 4
  • 34
  • 65