一个输入框多文件上传_多文件上传输入

一个输入框多文件上传

More often than not, I find myself wanting to upload more than one file at a time.  Having to use multiple "file" INPUT elements is annoying, slow, and inefficient.  And if I hate them, I can't imagine how annoyed my users would be.  Luckily Safari, Chrome, and Firefox have implemented a method by which users can upload multiple files within one INPUT element.

我发现自己经常一次要上传多个文件。 必须使用多个“文件” INPUT元素令人烦恼，缓慢且效率低下。 而且，如果我讨厌他们，我无法想象我的用户会多么生气。 幸运的是，Safari，Chrome和Firefox实现了一种方法，用户可以通过该方法在一个INPUT元素内上传多个文件。

View Demo 观看演示

HTML (The HTML)

<!-- IMPORTANT:  FORM's enctype must be "multipart/form-data" -->
<form method="post" action="upload-page.php" enctype="multipart/form-data">
  <input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" />
</form>

Simply adding the multiple attribute allows for multiple files to be uploaded via one INPUT element.  If you're a stickler for validation, you'll want to assign the multiple attribute a value of multiple.

只需添加multiple属性，即可通过一个INPUT元素上传多个文件。 如果您是验证的坚持者，则需要为Multiple属性分配一个值倍数。

用JavaScript列出多个文件 (Listing Multiple Files with JavaScript)

//get the input and UL list
var input = document.getElementById('filesToUpload');
var list = document.getElementById('fileList');

//empty list for now...
while (list.hasChildNodes()) {
	list.removeChild(ul.firstChild);
}

//for every file...
for (var x = 0; x < input.files.length; x++) {
	//add to list
	var li = document.createElement('li');
	li.innerHTML = 'File ' + (x + 1) + ':  ' + input.files[x].name;
	list.append(li);
}

The input.files property provides an array of files for which you can check the length;  if there's a length, you can loop through each file and access the file paths and names.

input.files属性提供了一个文件数组，您可以检查文件的长度。 如果有长度，则可以遍历每个文件并访问文件路径和名称。

使用PHP接收和处理文件 (Receiving and Handling Files with PHP)

if(count($_FILES['uploads']['filesToUpload'])) {
	foreach ($_FILES['uploads']['filesToUpload'] as $file) {
	    
		//do your upload stuff here
		echo $file;
		
	}
}

PHP creates an array of the files uploaded with the given INPUT's name.  This variable will always be an array within PHP.

PHP将使用给定的INPUT名称创建上传文件的数组。 此变量将始终是PHP中的一个数组。

View Demo 观看演示

Of course, you could a Flash-based equivalent for Internet Explorer and Opera, but having to add and support another component can be taxing.  Hopefully these browsers add support for multiple file uploads soon!

当然，您可以使用基于Flash的Internet Explorer和Opera等价物，但是必须添加并支持其他组件可能会很麻烦。 希望这些浏览器能尽快添加对多个文件上传的支持！

翻译自: https://davidwalsh.name/multiple-file-upload

一个输入框多文件上传