如何不依靠JS或Flash来使用HTML5传输多文件(转载)

songzhan

浏览: 250436 次
性别:

最近访客更多访客>>

lclc88com

yanga520

Sunflower-13

iaiai

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html5

HTML5

虽然现在已经可以通过表单的方式用浏览器向服务器传输文件，尤其是<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将仅仅只接受到最后一个文件。

分享到：

jQuery动画实现让页面动起来 <转载> | JQuery 事件小结

2012-07-07 07:46
浏览 926
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论