How to get the filename from input type=file html element using JavaScript or JQuery?

Question

In Google Chrome browser, i have tried several way + following and none is giving me the value of the file name which was attached, after validation i will submit the file. But always its undefined or val() does not found..

How to resolve it?

console.log($("input[name='attachment[]']"));
/* Output:
[
<input type="file" name="attachment[]" id="attachment">
, 
<input type="file" name="attachment[]" id="attachment">
, 
<input type="file" name="attachment[]" id="attachment">
]
*/

$.each($("input[name='attachment[]']"), function(i,v) {
    console.log(i);
    console.log(v); //v.val() does not exist... even uploaded a file and showing file

});

/* Output: 
0
<input type="file" name="attachment[]" id="attachment">
1
<input type="file" name="attachment[]" id="attachment">
2
<input type="file" name="attachment[]" id="attachment">
*/

return false;

`Uncaught TypeError: Object # has no mehtod 'val'` thats what it returns while trying with `$(v).val()`. — , May 21 '12 at 10:07
Side note: an `id` should be unique. Use for example `attachment1`, `attachment2`, ..., `attachmentn`. — sp00m, May 21 '12 at 10:12

sp00m · Accepted Answer · 2012-05-21T11:54:57.003

19

This should work:

$("input[name='attachment[]']").each(function() {
    var fileName = $(this).val().split('/').pop().split('\\').pop();
    console.log(fileName);
});

You can't get the full path of the file, because it depends on the browser you use. The only common cross-browser value for an input file is the name of the file.

edited May 21 '12 at 11:54

answered May 21 '12 at 10:08

sp00m

47,968
31
142
252

score 13 · Answer 2 · edited May 04 '17 at 06:08

13

I'd suggest something akin to the following:

$('input:file').change(
    function(e){
        console.log(e.target.files[0].name);
    });

JS Fiddle demo.

If you're allowing for multiple files to be uploaded, using the multiple attribute, then to get each of the names:

$('input:file').change(
    function(e){
        var f = e.target.files,
            len = f.length;
        for (var i=0;i<len;i++){
            console.log(f[i].name);
        }
    });

JS Fiddle demo.

NOTE: in current browser versions, f[i].fileName should be f[i].name.

edited May 04 '17 at 06:08

cstoddart

39
1
9

answered May 21 '12 at 10:09

David Thomas

249,100
51
377
410

10

Should now be `.name` instead of `.fileName`. – Andrius Naruševičius Nov 16 '13 at 21:28
2

I can confirm that it's now `.name` instead of `.fileName`. It might be a good thing to edit the answer :) – Danish Ashfaq Sep 11 '14 at 15:21

worc · Answer 3 · 2016-10-10T23:58:58.153

The <input type=file> element has a zero-indexed FileList accessed through its member variable files.

You can access that list through a query selector:

document.querySelector('input[type=file]').files

And you can access the file name with dot notation:

document.querySelector('input[type=file]').files[0].name

It should be noted that in Chrome 53, Firefox 49, and the current W3C spec for the FileAPI, files is an Array-like list not an actual array. You can access each file object through its index, but you won't have access to any array prototypes without first converting the list to an array.

score 0 · Answer 4 · answered May 21 '12 at 10:21

0

for

<input type="file" mutiple onchange="getSongs(this.files)"/>

use

function getSongs(files){
  ...
  for(var i = 0; i < files.length; i++){
     file=files[i];
     filename=file.fileName;
  }
}

if the input is just for single file, just use the name attribute

$("type=['file']").attr('name');

answered May 21 '12 at 10:21

panda

1,344
3
14
35

It would actually be: filename=file.name; – Alex Daro Apr 07 '16 at 00:35

How to get the filename from input type=file html element using JavaScript or JQuery?

4 Answers4

Linked