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

JavascriptHtml

Javascript Problem Overview


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

Javascript Solutions


Solution 1 - Javascript

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

Solution 2 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionspuasView Question on Stackoverflow
Solution 1 - JavascriptfoxyView Answer on Stackoverflow
Solution 2 - JavascriptWladimir PalantView Answer on Stackoverflow