I have a file input with the multiple="multiple"
attribute to allow users to select multiple files at once. I would like to display selected file names and their count prior to upload however I'm not sure how to get this information from file input element using javascript?
<input type="file" id="fileElementId" name="files[]" size="20" multiple="multiple" />
I've tried this:
document.getElementById('fileElementId').value
But this only returns one file name when I select multiple files. Using JavaScript is how do I retrieve the number of selected files and their names from a file input element with a multiple
attribute?
In new browsers that support the HTML5 file stuff, your <input>
element will have a "files" property. That will give you a "FileList" reference, which has a ".length" property. There's also an access method called ".item()" on the "FileList" instance, and it takes an integer arg to access individual "File" elements. Those have a ".name" property.
So:
var inp = document.getElementById('fileElementId'); for (var i = 0; i < inp.files.length; ++i) { var name = inp.files.item(i).name; alert("here is a file name: " + name); }
This will of course not work in older IE versions, and I'm not even sure how thorough the Safari and Chrome support is; however, if you're writing pages with "multiple" set on your file inputs you're already dancing on the edge :-)
This is untested, but you could try:
$('#fileElementId').get(0).files;
or
document.getElementById('fileElementId').files;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With