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!

Answer 1

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); } 

Answer 2

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);"