How to select multiple files with <input type="file">?

Javascript Problem Overview

How to select multiple files with <input type="file">?

Javascript Solutions

Solution 1 - Javascript

New answer:

In HTML5 you can add the multiple attribute to select more than 1 file.

<input type="file" name="filefield" multiple="multiple">

Old answer:

> 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.

Solution 2 - Javascript

There is also HTML5 <input type="file" multiple name="files[]" /> (specification).

Browser support is quite good on desktop (just not supported by IE 9 and prior), less good on mobile, I guess because it's harder to implement correctly depending on the platform and version.

Solution 3 - Javascript

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!

Solution 4 - Javascript

This jQuery plugin (jQuery File Upload Demo) does it without flash, in the form it's using:

<input type='file' name='files[]' multiple />

Solution 5 - Javascript

You can do it now with HTML5

In essence you use the multiple attribute on the file input.

<input type='file' multiple>

Solution 6 - Javascript

Thats easy ...

<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());
};

Solution 7 - Javascript

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

Solution 8 - Javascript

<form action="" method="post" enctype="multipart/form-data">
<input type="file" multiple name="img[]"/>
<input type="submit">
</form>
<?php
print_r($_FILES['img']['name']);
?>

Solution 9 - Javascript