52

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?

0

3 Answers 3

85

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 :-)

3
  • 1
    multiple works in Firefox 3.6+, Chrome 2+, Safari 4+, Opera 11+ etc. so yeah - anywhere except IE (not even IE9). To me it's easier to tell people to upgrade their browser than introduce session fixation problem by fixing flash cookie bug, since the only viable alternative is flash uploader.
    – Stann
    May 29, 2011 at 23:24
  • Thanks though. this worked for me in chrom, firefox, opera, safari. Definately fails miserably in pile of garbage that is IE. :) lol
    – Stann
    May 29, 2011 at 23:28
  • 4
    FWIW if you need the files' sizes: fileSize=inp.files.item(i).size
    – gordon
    Jun 22, 2012 at 21:41
24

This is untested, but you could try:

    $('#fileElementId').get(0).files;

or

    document.getElementById('fileElementId').files;
4
  • 3
    @lbu: I don't see why it wouldn't. the main thing is - "files" element property. and also - yes - i checked - it works either jquery or raw way.
    – Stann
    May 30, 2011 at 2:27
  • 4
    $('#fileElementId').get(0).files it returns only object. instead use $('#fileElementId').get(0).files.length.
    – R J.
    Nov 27, 2012 at 7:01
  • @Ibu he may not have time to test it. It is better if you test the answer or appreciate answer,...... Don't demotivate users. Mar 23, 2018 at 6:25
  • 1
    It is a comment from 7 years ago, don't let it demotivate you.
    – Ibu
    Mar 23, 2018 at 7:24
0

The second answer was wrong.

Answer should be document.getElementById('fileElementId').files.length; instead of document.getElementById('fileElementId').files;.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.