How to select multiple files with <input type="file">?
-
It's about javascript and htmlMask– Mask2009-10-20 08:47:26 +00:00Commented Oct 20, 2009 at 8:47
-
Do you mean upload multiple files in one go (when you select one at a time and then click upload)? Or do you mean using ctrl+click to select several files in one browser window?cletus– cletus2009-10-20 09:04:54 +00:00Commented Oct 20, 2009 at 9:04
-
4You can do it with HTML5 using the multiple attribute on the input element. <input type='file' multiple=''> Here's a great fiddle that utilizes it: jsfiddle.net/0GiS0/Yvgc2Costa Michailidis– Costa Michailidis2013-07-05 22:34:22 +00:00Commented Jul 5, 2013 at 22:34
Add a comment
|
11 Answers
New answer:
In HTML5 you can add the multiple attribute to select more than 1 file.
<input type="file" name="filefield" 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.
8 Comments
Fabien Ménager
Gmail uses Flash to do this
ZippyV
@Costa On the 20th of October of 2009 most browsers didn't support that feature and Niavlys already showed the html5 solution 2 years ago.
Ali
this answer is more ancient than the dinosaurs
Jean-Paul
this multiple="multiple" is not user friendly, the avarage user doesn't understand it, doesn't even know what a "ctrl button" does, and it cannot select files in different folders.
You Old Fool
if this is form is being submitted to a php form name should be
name="filefield[]" so that it returns an array |
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.
1 Comment
Ashit Vora
Not supported on IE9 and prior :(
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!
1 Comment
B''H Bi'ezras -- Boruch Hashem
unless you submit it with a websocket or ajax
This jQuery plugin (jQuery File Upload Demo) does it without flash, in the form it's using:
<input type='file' name='files[]' multiple />
1 Comment
JerryDDG
also not supported on IE9-, github.com/blueimp/jQuery-File-Upload/wiki/…
You can do it now with HTML5
In essence you use the multiple attribute on the file input.
<input type='file' multiple>
answered Jul 5, 2013 at 22:35
Costa Michailidis
8,29818 gold badges86 silver badges138 bronze badges
4 Comments
Hubert OG
What about support for this thing? Canisuse.com doesn't have the info.
Costa Michailidis
I'm not sure, I checked the same place, haha.
vladkras
FileReader doesn't have
.name property, so title in your example is always undefined: jsfiddle.net/m5jeyeyt/1
Kafaa Billahi Syahida
@HubertOG caniuse.com/input-file-multiple
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());
};
2 Comments
RightHandedMonkey
This is already answered clearly. What is the need to add a javascript example?
Thomas Ludewig
cause its nice ?
Comments
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
Comments
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
Comments
<form action="" method="post" enctype="multipart/form-data">
<input type="file" multiple name="img[]"/>
<input type="submit">
</form>
<?php
print_r($_FILES['img']['name']);
?>
Comments
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/
