jQuery: get the file name selected from <input type="file" />

Question

This code should work in IE (don't even test it in Firefox), but it doesn't. What I want is to display the name of the attached file. Any help?

<html>
<head>
  <title>example</title>    
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript">  
        $(document).ready( function(){            
      $("#attach").after("<input id='fakeAttach' type='button' value='attach a file' />");      
      $("#fakeAttach").click(function() {            
        $("#attach").click();        
        $("#maxSize").after("<div id='temporary'><span id='attachedFile'></span><input id='remove' type='button' value='remove' /></div>");        
        $('#attach').change(function(){
          $("#fakeAttach").attr("disabled","disabled");          
          $("#attachedFile").html($(this).val());
        });        
        $("#remove").click(function(e){
          e.preventDefault();
          $("#attach").replaceWith($("#attach").clone());
          $("#fakeAttach").attr("disabled","");
          $("#temporary").remove();
        });
      })
    }); 
  </script> 
</head>
<body>
  <input id="attach" type="file" /><span id="maxSize">(less than 1MB)</span>    
</body>
</html>

Check my answer, I believe it's the best and most understandable way of achieving this. — James111
– James111, Commented Nov 26, 2015 at 2:02

Thinker · Accepted Answer · 2009-08-19 10:44:08Z

148

It is just such simple as writing:

$('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 Aug 19, 2009 at 10:44

Thinker

14.5k9 gold badges42 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

ConNen Over a year ago

Thank you! That worked on the previous (and simplified) problem I posed, but it doen't work on the extended version.

Khurram Ijaz Over a year ago

how to get the complete path of the file the above code only gives the file name.

zneak Over a year ago

@PHP Priest, you can't. Browsers don't expose that kind of information.

jinglesthula Over a year ago

@PHP Priest, if you could do that, you could surreptitiously transmit data about the user's file system via AJAX and the user would likely never know. Imagine how much worse it would be if you could programmatically set the value of a file input. Yeah. Security issues.

James111 Over a year ago

This seems a bit over the top? The way I've listed is a lot easier and understandable.

|

James111 · Accepted Answer · 2015-11-26 01:59:03Z

20

The simplest way is to simply use the following line of jquery, using this you don't get the /fakepath nonsense, you straight up get the file that was uploaded:

$('input[type=file]')[0].files[0]; // This gets the file
$('#idOfFileUpload')[0].files[0]; // This gets the file with the specified id

Some other useful commands are:

To get the name of the file:

$('input[type=file]')[0].files[0].name; // This gets the file name

To get the type of the file:

If I were to upload a PNG, it would return image/png

$("#imgUpload")[0].files[0].type

To get the size (in bytes) of the file:

$("#imgUpload")[0].files[0].size

Also you don't have to use these commands on('change', you can get the values at any time, for instance you may have a file upload and when the user clicks upload, you simply use the commands I listed.

answered Nov 26, 2015 at 1:59

James111

16k17 gold badges88 silver badges130 bronze badges

1 Comment

Gagantous Over a year ago

why did i get error Cannot read property 'name' of undefined?

Anatolii Pazhyn · Accepted Answer · 2014-02-12 18:44:00Z

19

$('input[type=file]').change(function(e){
    $(this).parents('.parent-selector').find('.element-to-paste-filename').text(e.target.files[0].name);
});

This code will not show C:\fakepath\ before file name in Google Chrome in case of using .val().

answered Feb 12, 2014 at 18:44

Anatolii Pazhyn

1,48213 silver badges8 bronze badges

Comments

Anil Gupta · Accepted Answer · 2014-12-10 09:45:32Z

4

<input onchange="readURL(this);"  type="file" name="userfile" />
<img src="" id="blah"/>
<script>
 function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah')
                    .attr('src', e.target.result)
                    .width(150).height(200);
        };

        reader.readAsDataURL(input.files[0]);
        //console.log(reader);
        //alert(reader.readAsDataURL(input.files[0]));
    }
}
</script>

answered Dec 10, 2014 at 9:45

Anil Gupta

1,6511 gold badge20 silver badges21 bronze badges

1 Comment

Evan M Over a year ago

Thanks! This was helpful in grabbing the actual name of the file uploaded and not the full path.

sth · Accepted Answer · 2010-06-07 19:46:47Z

3

I had used following which worked correctly.

$('#fileAttached').attr('value', $('#attachment').val())

edited Jun 7, 2010 at 19:46

sth

231k56 gold badges288 silver badges370 bronze badges

answered Jun 7, 2010 at 19:18

ihmar

311 bronze badge

Comments

Martin. · Accepted Answer · 2012-02-16 18:14:54Z

2

//get file input
var $el = $('input[type=file]');
//set the next siblings (the span) text to the input value 
$el.next().text( $el.val() );

edited Feb 16, 2012 at 18:14

Martin.

10.5k3 gold badges45 silver badges69 bronze badges

answered Aug 19, 2009 at 10:44

redsquare

78.8k21 gold badges155 silver badges159 bronze badges

Comments

daniel ye · Accepted Answer · 2011-12-22 20:59:13Z

1

Add a hidden reset button :

<input id="Reset1" type="reset" value="reset" class="hidden" />

Click the reset button to clear the input.

$("#Reset1").click();

answered Dec 22, 2011 at 20:59

daniel ye

251 bronze badge

1 Comment

DaveWalley Over a year ago

Can you click a hidden button?

Raghuraj Singh Gurjar · Accepted Answer · 2017-08-22 20:37:59Z

-1

<input onchange="readURL(this);"  type="file" name="userfile" />
<img src="" id="viewImage"/>
<script>
 function readURL(fileName) {
    if (fileName.files && fileName.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#viewImage')
                    .attr('src', e.target.result)
                    .width(150).height(200);
        };

        reader.readAsDataURL(fileName.files[0]);
    }
}
</script>

answered Aug 22, 2017 at 20:37

Raghuraj Singh Gurjar

113 bronze badges

1 Comment

Tarek.Eladly Over a year ago

thanks man i was searching for this i know this is not the subject but it was my answer you know ;)

Collectives™ on Stack Overflow

jQuery: get the file name selected from <input type="file" />

8 Answers 8

9 Comments

1 Comment

Comments

1 Comment

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

9 Comments

1 Comment

Comments

1 Comment

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related