如何使用 < input type = “ file”> 选择多个文件？

如何使用 <input type="file">选择多个文件？

262038 次浏览
小开
最佳答案

新答案:

在 HTML5中，您可以添加 multiple属性来选择多个文件。

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

老答案:

每个 <input type="file" />只能选择一个文件 发送多个文件，您必须使用多个输入标签或使用 闪电侠还是银光侠。

小开

还有 HTML5<input type="file" multiple name="files[]" />(规格)。

浏览器支持在桌面上相当好(只是 IE9和之前的版本不支持) ，在移动端不太好，我猜想是因为根据平台和版本很难正确实现。

小开

这个 jQuery 插件(JQuery 文件上传演示)不使用 flash，它使用的形式是:

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

整件事应该是这样的:

<form enctype='multipart/form-data' method='POST' action='submitFormTo.php'>
<input type='file' name='files[]' multiple>
<button type='submit'>Submit</button>
</form>

请确保在您的 <form>标记中有 enctype='multipart/form-data'属性，否则在提交后您无法读取服务器端的文件！

小开

你现在可以用 HTML5来做

实际上，您在文件输入中使用了多个属性。

<input type='file' multiple>
小开

HTML5为 type 属性为 file 的 input 元素提供了新的属性复数。 因此，您可以选择多个文件，而 IE9和以前的版本不支持这一点。

注意: 注意输入元素的名称。 当要上载多个文件时，应使用数组而不是字符串作为 Name 属性。

例如: input type = “ file”name = “ myPhotos []”multi = “ multi”

如果您使用的是 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']);
?>
小开

复制并粘贴到你的 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>';
}

这是你通过我从这个网页: http://www.html5rocks.com/en/tutorials/file/dndfiles/得到的

小开

很简单..。

<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为 type 属性为 file 的 input 元素提供了新的属性复数。因此，您可以选择多个文件，而 IE9和以前的版本不支持这一点。

注意: 注意输入元素的名称。当你想上传多个文件时，你应该使用数组而不是字符串作为 name 属性的值。

例如:

input type="file" name="myPhotos[]" multiple="multiple"

如果您使用 php，那么您将获得 $_ FILES 中的数据，并使用 var _ dump ($_ FILES)查看输出并执行处理

小开

只要使用 multiple属性

<input type='file' multiple>

了解更多关于 多重属性的信息


提交答案