Get input type="file" value when it has multiple files selected [duplicate]

Question

Possible Duplicate:
Retrieving file names out of a multi-file upload control with javascript

From HTML5 input type="file" allows users to choose multiple files by adding the multiple="multiple" :

<input type="file" multiple="multiple" />

My question is: how can I get the value of that input? When using the .value it only returns the filename of the first file selected, but when choosing more than one I am not able to view the other ones.

What I have:

<input type="file" multiple="multiple" onchange="alert(this.value)"
     onmouseout="alert(this.value) />

which as I told you, is only showing the name of one of the selected files.

NOTE: I don't want to edit the value (I know that is not possible) only the name of the files

Thanks!

John · Accepted Answer · 2017-02-05 00:34:44Z

120

The files selected are stored in an array: [input].files

For example, you can access the items

// assuming there is a file input with the ID `my-input`...
var files = document.getElementById("my-input").files;

for (var i = 0; i < files.length; i++)
{
 alert(files[i].name);
}

For jQuery-comfortable people, it's similarly easy

// assuming there is a file input with the ID `my-input`...
var files = $("#my-input")[0].files;

for (var i = 0; i < files.length; i++)
{
 alert(files[i].name);
}

edited Feb 5, 2017 at 0:34

John

1

answered Aug 11, 2011 at 9:20

foxy

7,6722 gold badges32 silver badges34 bronze badges

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

4 Comments

Khalid Dabjan Over a year ago

the files property of the file input is undefined on ie, though works just fine on other browsers. do you know any way to go around this?

OO7 Over a year ago

files[i] is undefined in IE9. Can you give solution on how to get this work in IE9 ?

barell Over a year ago

@OO7 IE9 doesn't support multiple input file. It is IE10+ only.

Lei Yang Over a year ago

name is without path, what property is for full path?

score 12 · Accepted Answer · 2011-08-11 09:36:47Z

12

You use input.files property. It's a collection of File objects and each file has a name property:

onmouseout="for (var i = 0; i < this.files.length; i++) alert(this.files[i].name);"

edited Aug 11, 2011 at 9:36

answered Aug 11, 2011 at 9:21

user785541

2 Comments

spuas Over a year ago

Thanks, it works perfectly the same as freedompeace answer (name or fileName both work) but he answered first and I cannot set two answers as accepted, +1 to your answer anyway

user785541 Over a year ago

Actually, he answered without a proper code example first and edited his post after I sent mine. But - doesn't really matter. :)

Collectives™ on Stack Overflow

Get input type="file" value when it has multiple files selected [duplicate]

2 Answers 2

4 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Linked

Related