[英]How to select multiple files with <input type="file">?
How to select multiple files with <input type="file">
?如何使用<input type="file">
select 多个文件?
New answer:新答案:
In HTML5 you can add the multiple
attribute to select more than 1 file.在 HTML5 中,您可以添加multiple
属性来选择 1 个以上的文件。
<input type="file" name="filefield" multiple="multiple">
Old answer:旧答案:
You can only select 1 file per
<input type="file" />
.每个<input type="file" />
只能选择 1 个文件。 If you want to send multiple files you will have to use multiple input tags or use Flash or Silverlight.如果要发送多个文件,则必须使用多个输入标签或使用 Flash 或 Silverlight。
There is also HTML5 <input type="file[]" multiple />
( specification ).还有 HTML5 <input type="file[]" multiple />
( 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.浏览器在桌面上的支持非常好(只是不支持 IE 9 和之前的版本),在移动设备上不太好,我猜是因为根据平台和版本很难正确实现。
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!确保您的<form>
标签中有enctype='multipart/form-data'
属性,否则提交后无法读取服务器端的文件!
这个 jQuery 插件 ( jQuery File Upload Demo ) 在没有 flash 的情况下以它使用的形式完成:
<input type='file' name='files[]' multiple />
You can do it now with HTML5你现在可以用 HTML5 来做
In essence you use the multiple attribute on the file input.本质上,您在文件输入上使用了 multiple 属性。
<input type='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());
};
HTML5 has provided new attribute multiple for input element whose type attribute is file. HTML5 为 type 属性为 file 的 input 元素提供了新的属性 multiple。 So you can select multiple files and IE9 and previous versions does not support this.所以你可以选择多个文件,而 IE9 和以前的版本不支持这个。
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.当你想上传多个文件时,你应该使用数组而不是字符串作为 name 属性的值。
ex: input type="file" name="myPhotos[]" multiple="multiple"例如:输入类型="文件"名称="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如果您使用的是 php,那么您将在 $_FILES 中获取数据并使用 var_dump($_FILES) 并查看输出并进行处理 现在您可以迭代并完成剩下的工作
<form action="" method="post" enctype="multipart/form-data">
<input type="file" multiple name="img[]"/>
<input type="submit">
</form>
<?php
print_r($_FILES['img']['name']);
?>
HTML5 has provided new attribute multiple for input element whose type attribute is file. HTML5 为 type 属性为 file 的 input 元素提供了新的属性 multiple。 So you can select multiple files and IE9 and previous versions does not support this.所以你可以选择多个文件,而 IE9 和以前的版本不支持这个。
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.当你想上传多个文件时,你应该使用数组而不是字符串作为 name 属性的值。
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如果您使用的是 php,那么您将在 $_FILES 中获取数据并使用 var_dump($_FILES) 并查看输出并进行处理 现在您可以迭代并完成剩下的工作
Just use multiple
attribute只需使用multiple
属性
<input type='file' multiple>
Read more about multiple attribute阅读有关多属性的更多信息
Copy and paste this into your html:将其复制并粘贴到您的 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/这是通过我从这个网页传给你的: http : //www.html5rocks.com/en/tutorials/file/dndfiles/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.