Get input type="file" value when it has multiple files selected
JavascriptHtmlJavascript 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);"