Why "HTML <input type='file' />" has "files" property in JavaScript?

Consider 开发者_StackOverflow社区this HTML snippet:

<input type='file' id='fileUpload' />

To get access to this control in JavaScript, we can write:

var temp = document.getElementById('fileUpload');

OK, don't get mad, I know you all know this. But the interesting part is that, temp variable now has a property called files, (not file, but files, the plural form) which is of type FileList, which of course is a list of File objects. This semantically should mean that uploading multiple files via one and only one HTML file upload control should be possible. However, you can't upload multiple files this way and there are many workarounds, not straight usage.

How do you explain this paradox?

Update: I built this jsfiddle to see one of the answers in action.

In HTML5, The multiple attribute specifies that multiple values can be selected for an input field.

<input type='file' multiple='multiple' />

These links should help:

http://www.w3schools.com/html5/html5_form_attributes.asp

http://rakaz.nl/2009/08/uploading-multiple-files-using-html5.html

According to the Gecko DOM Reference, it is only applicable when using the file upload element via drag-n-drop.

So that we can read on the client the contents of files selected that way:

https://developer.mozilla.org/en/Using_files_from_web_applications

This is possible in Firefox since version 3.0. At the time I've written an extensive article on how to do real Ajax file uploads: http://igstan.ro/posts/2009-01-11-ajax-file-upload-with-pure-javascript.html

Nowadays, the Firefox 3.0 API has been removed. Instead you should be using a FileReader together with a FormData object. This should work in most recent browser version. I haven't done extensive research, but I believe no version of IE implements anything of these yet.