51

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?

John
  • 1
  • 13
  • 98
  • 177
Stann
  • 13,518
  • 19
  • 65
  • 73

3 Answers3

84

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

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • 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 '11 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 '11 at 23:28
  • 4
    FWIW if you need the files' sizes: `fileSize=inp.files.item(i).size` – gordon Jun 22 '12 at 21:41
24

This is untested, but you could try:

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

or

    document.getElementById('fileElementId').files;
Matthew Nessworthy
  • 1,428
  • 10
  • 19
  • 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 '11 at 02:27
  • 4
    $('#fileElementId').get(0).files it returns only object. instead use $('#fileElementId').get(0).files.length. – R J. Nov 27 '12 at 07: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. – I am the Most Stupid Person Mar 23 '18 at 06:25
  • 1
    It is a comment from 7 years ago, don't let it demotivate you. – Ibu Mar 23 '18 at 07:24
0

The second answer was wrong.

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

I am the Most Stupid Person
  • 3,415
  • 9
  • 22
  • 48