Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

You can only select 1 file per <input type="file" /> . If you want to send multiple files you will have to use multiple input tags or use Flash or Silverlight.

The whole thing should look like:

<form enctype='multipart/form-data' method='POST' action='submitFormTo.php'> 
    <input type='file' name='files[]' multiple>
    <button type='submit'>Submit</button>
</form>
Make sure you have the enctype='multipart/form-data' attribute in your <form> tag, or you can't read the files on the server side after submission!
This jQuery plugin (jQuery File Upload Demo) does it without flash, in the form it's using:
<input type='file' name='files[]' multiple />
                FileReader doesn't have .name property, so title in your example is always undefined: jsfiddle.net/m5jeyeyt/1
– vladkras
                May 13, 2017 at 13:44
<input type='file' multiple>
$('#file').on('change',function(){
     _readFileDataUrl(this,function(err,files){
           if(err){return}
           console.log(files)//contains base64 encoded string array holding the 
           image data 
var _readFileDataUrl=function(input,callback){
    var len=input.files.length,_files=[],res=[];
    var readFile=function(filePos){
        if(!filePos){
            callback(false,res);
        }else{
            var reader=new FileReader();
            reader.onload=function(e){              
                res.push(e.target.result);
                readFile(_files.shift());
            reader.readAsDataURL(filePos);
    for(var x=0;x<len;x++){
        _files.push(input.files[x]);
    readFile(_files.shift());
HTML5 has provided new attribute multiple for input element whose type attribute is file.
So you can select multiple files and IE9 and previous versions does not support this.
NOTE: be carefull with the name of the input element.
when you want to upload multiple file you should use array and not string as the value of the 
name attribute.
ex: input type="file" name="myPhotos[]" multiple="multiple"
and if you are using php then you will get the data in $_FILES and 
use var_dump($_FILES) and see output and do processing
Now you can iterate over and do the rest
HTML5 has provided new attribute multiple for input element whose type attribute is file. So you can select multiple files and IE9 and previous versions does not support this.
NOTE: be carefull with the name of the input element. when you want to upload multiple file you should use array and not string as the value of the name attribute.
input type="file" name="myPhotos[]" multiple="multiple"
and if you are using php then you will get the data in $_FILES and use var_dump($_FILES) and see output and do processing Now you can iterate over and do the rest
<form action="" method="post" enctype="multipart/form-data">
<input type="file" multiple name="img[]"/>
<input type="submit">
</form>
print_r($_FILES['img']['name']);
Copy and paste this into your html:
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
  output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
              f.size, ' bytes, last modified: ',
              f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
              '</li>');
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
This comes to you, through me, from this webpage: http://www.html5rocks.com/en/tutorials/file/dndfiles/