jQuery: get the file name selected from

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, Nov 26 '15 at 02:02

score 148 · Answer 1 · answered Aug 19 '09 at 10:44

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 '09 at 10:44

Thinker

14,234
9
40
55

Thank you! That worked on the previous (and simplified) problem I posed, but it doen't work on the extended version. – Aug 19 '09 at 12:48
how to get the complete path of the file the above code only gives the file name. – Khurram Ijaz Apr 26 '11 at 07:12
3

@PHP Priest, you can't. Browsers don't expose that kind of information. – zneak Aug 31 '11 at 06:07
2

@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. – jinglesthula Nov 30 '11 at 18:06
@emrah I think it is a convention to indicate that the variable hold a jquery object instead of a plain dom object – Dan Roberts Oct 13 '15 at 16:01
@DanRoberts I ment where does it come from. I figured later it is weird local js var. – atilkan Oct 15 '15 at 15:28
@Thinker Is there a way to set the name of a file before it it sent to server. Thanks. – Zaker Nov 02 '15 at 05:15
1

This seems a bit over the top? The way I've listed is a lot easier and understandable. – James111 Nov 26 '15 at 02:01
@User You cannot set the filename of the file, first it would change the file being uploaded and second you cannot change input type file values. – rrw Feb 26 '16 at 09:27

score 20 · Answer 2 · answered Nov 26 '15 at 01:59

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.

why did i get error Cannot read property 'name' of undefined? — Gagantous, Nov 23 '17 at 14:10

score 19 · Answer 3 · answered Feb 12 '14 at 18:44

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 '14 at 18:44

Anatolii Pazhyn

1,442
13
7

score 4 · Answer 4 · answered Dec 10 '14 at 09:45

<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>

Thanks! This was helpful in grabbing the actual name of the file uploaded and not the full path. — Evan M, May 04 '15 at 21:31

score 3 · Answer 5 · edited Jun 07 '10 at 19:46

3

I had used following which worked correctly.

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

edited Jun 07 '10 at 19:46

sth

222,467
53
283
367

answered Jun 07 '10 at 19:18

ihmar

31
1

score 2 · Answer 6 · edited Feb 16 '12 at 18:14

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 '12 at 18:14

Martin.

10,494
3
42
68

answered Aug 19 '09 at 10:44

redsquare

78,161
20
151
159

score 1 · Answer 7 · answered Dec 22 '11 at 20:59

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 '11 at 20:59

daniel ye

25
1

1

Can you click a hidden button? – DaveWalley Apr 17 '14 at 21:06

score -1 · Answer 8 · answered Aug 22 '17 at 20:37

-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 '17 at 20:37

Raghuraj Singh Gurjar

11
3

thanks man i was searching for this i know this is not the subject but it was my answer you know ;) – Tarek.Eladly Mar 18 '18 at 21:30

jQuery: get the file name selected from

8 Answers8

Linked

Related