虽然现在已经可以通过表单的方式用浏览器向服务器传输文件，尤其是<input type=file>这 种表单控件，然而这东西一次最多只能传递一个文件。如果用户需要上传整个相册或者多张图片，那么技术人员只好从其他途径想办法了，比如Flash或者 JS。但是现在通过HTML5提供的新标签，我们就可以完全不需要那些额外的东西了。HTML5为上传文件提供了几个新标签，比如multiple就是为 了支持多文件上传专用的。multiple是一个bool标签来表示是否允许用户上传多个文件。比如<input type="file" multiple/>在最新版的Safari, Chrome, FireFox, IE以及Opera都是支持的。至于控件的外观渲染那就是各种浏览器自己的事情了。为了能让用户一次性选择多个文件，用户将可用Shift或者Ctrl或 者CMD按键逐个点击要添加的文件。
如何使用
从技术角度看，你只需要在input控件中标注multiple标签就够了
以下就是演示代码：
01 |
<!DOCTYPE html> |
02 |
03 |
<html> |
04 |
05 |
<head> |
06 |
07 |
<title> |
08 |
09 |
Solution 4-5: Sending multiple files |
10 |
11 |
</title> |
12 |
13 |
</head> |
14 |
15 |
<body> |
16 |
17 |
<form id="myForm"> |
18 |
19 |
<fieldset> |
20 |
21 |
<legend>Solution 4-5: Sending multiple files</legend> |
22 |
23 |
<label>Upload one or more files:</label> |
24 |
25 |
<input type="file" name="multipleFileUpload" multiple /> |
26 |
27 |
28 |
29 |
30 |
</fieldset> |
31 |
32 |
</form> |
33 |
34 |
</body> |
35 |
36 |
</html> |
重要心得
用户选择的多个文件传递到服务端后将会被服务端的编程语言去处理的。有些编程语言，比如PHP需要你为name标签的字符添加方括号来支持传输多个文件。
1 |
<input name="filesUploaded[]" type="file" multiple /> |
这样，PHP将构造一个数据类型的数组，来容纳一个个上传到服务器的文件。相反如果你在HTML标签中不适用方括号的话，PHP将仅仅只接受到最后一个文件。
原文链接, OSChina.NET原创翻译
发表回复