在 html5 中，出现了众多的新的技术和特性，而本文将介绍的是目前 HTML5 标准中，对如何将用户客户端的文件拖拉到 浏览器 这一特性进行初步的讲解。在HTML5中的标准中，提到了希望能在新一代浏览器中，支持用户直接将客户端桌面的文件拖放到浏览器中，甚至鼓 […]
在html5中，出现了众多的新的技术和特性，而本文将介绍的是目前HTML5标准中，对如何将用户客户端的文件拖拉到浏览器这一特性进行初步的讲解。在HTML5中的标准中，提到了希望能在新一代浏览器中，支持用户直接将客户端桌面的文件拖放到浏览器中，甚至鼓励做更多的工作(比如上传文件)。这篇文章将分如下几个方面进行初步的分析和探讨：
-
如何将文件拖放到web页面中
-
在Javascript中分析拖拽文件
-
在客户端装载和解析文件
-
使用 XMLHttpRequest2异步上传文件到服务端
-
上传时显示一个进度条
-
改进上传文件的表单，甚至支持IE 6，以让在各浏览器中可以兼容运行。
-
并介绍如何单单只用Javascript实现，不用任何框架。
目前浏览器对文件拖拉的支持
在我们开始讲解前，我们先要说明下，由于HTML5的标准最终版本还没完全发布，各浏览器也不是完全都对所有功能进行支持，所以本文的程序有可能在今后的各浏览器中不能完全运行成功，但至少在本文发表时，会对以下浏览器在如下各方面进行支持。
1) 目前程序能在所有的Firefox和Chrome的浏览器中很好的运行。
2) Opera浏览器能解通过Javascript去解析文件，但不支持文件的拖拉到浏览器中及使用XMLHttpRequest2去上传文件。
3) IE和Safari不支持任何本文提到的API和新特性。
4) Apple不允许在iOS系统中使用HTML表单上传文件。
下面，就让我们开始学习之旅吧。
HTML和CSS
我们先来看下上传文件的表单，代码如下：
<
Form id=
"upload" action=
"upload.php" method=
"POST" enctype=
"multipart/form-data">
<fieldset>
<legend>HTML File Upload</legend>
<input type=
"hidden" id=
"MAX_FILE_SIZE" name=
"MAX_FILE_SIZE" value=
"300000" />
<div>
<label
for=
"fileselect">Files
to upload:</label>
<input type=
"file" id=
"fileselect" name=
"fileselect[]" multiple=
"multiple" />
<div id=
"filedrag">
or drop files here</div>
</div>
<div id=
"submitbutton">
<button type=
"submit">Upload Files</button>
</div>
</fieldset>
</form>
<div id=
"messages">
<p>Status Messages</p>
</div>
可以看到，在这个表单中，放置了一个文件选择框，唯一跟HTML4不同的时，这个框采
用的是HTML5中的一个新增的文件上传框属性multiple，允许选择多个不同的文件。此外，
在id为 filedrag的div中，这个区域是用来将文件拖拉放置的区域，下文中会用到。
接下来会看下CSS，代码如下：
#filedrag
{
display: none;
font-weight: bold;
text-align: center;
padding: 1em 0;
margin: 1em 0;
color: #555;
border: 2px dashed #555;
border-radius: 7px;
cursor: default;
}
#filedrag.hover
{
color: #f00;
border-color: #f00;
border-style: solid;
box-shadow: inset 0 3px 4px #888;
}
在这段CSS中，设置了当文件拖放到页面的指定区域时的样式，这个样式是当文件被拖动
到指定区域时，才起到作用的，是通过Javascript击发其起作用的，下文会提到。
HTML5中的文件API
在HTML5中，对文件的API有如下几点的新的改进，其标准可以参考
(http://www.w3.org/TR/file-upload/)。
-
FileList: 表示已选择的文件，以数组的形式表示。
-
File: 代表一个单独的文件
-
FileReader: FileReader是一个接口，它允许我们在客户端读取文件的数据，并且可以在Javascript中去使用。
开始动手写Javascript
下面，我们开始动手编写Javascript，首先我们编写一些工具javascript，比如：
// getElementById
function $id(id) {
return document.getElementById(id);
}
//
// 输出信息
function Output(msg) {
var m = $id("messages");
m.innerHTML = msg + m.innerHTML;
}
接者，我们编写init方法，去判断文件API的可用性，代码如下：
// 判断当前浏览器中文件API是否可用
if (window.File && window.FileList && window.FileReader) {
Init();
}
//
// 初始化程序
function Init() {
var fileselect = $id("fileselect"),
filedrag = $id("filedrag"),
submitbutton = $id("submitbutton");
// 添加文件选择的事件监听
fileselect.addEventListener("change", FileSelectHandler, false);
// 判断xmlhttprequest 2是否可用
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// file drop
filedrag.addEventListener("dragover", FileDragHover, false);
filedrag.addEventListener("dragleave", FileDragHover, false);
filedrag.addEventListener("drop", FileSelectHandler, false);
filedrag.style.display = "block";
// remove submit button
submitbutton.style.display = "none";
}
}
