玩转HTML5应用实战：灵活拖拉文件
- - ITeye博客本人原创作品，原文发表在：. 在HTML5中，出现了众多的新的技术和特性，而本文将介绍的是目前HTML5标准中，对如何将用户客户端的文件拖拉到浏览器这一特性进行初步的讲解. 在HTML5中的标准中，提到了希望能在新一代浏览器中，支持用户直接将客户端桌面的文件拖放到浏览器中，甚至鼓励做更多的工作(比如上传文件).
玩转HTML5应用实战：灵活拖拉文件
标签：
html5
应用
拖拉
| 发表时间：2011-12-28 20:06 | 作者：
出处：http://www.iteye.com
本人原创作品，原文发表在：
http://tech.it168.com/a2011/1207/1285/000001285230_all.shtml
转载请注明出处
在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
我们先来看下上传文件的表单，代码如下：
可以看到，在这个表单中，放置了一个文件选择框，唯一跟HTML4不同的时，这个框采
用的是HTML5中的一个新增的文件上传框属性multiple，允许选择多个不同的文件。此外，
在id为 filedrag的div中，这个区域是用来将文件拖拉放置的区域，下文中会用到。
接下来会看下CSS，代码如下：
在这段CSS中，设置了当文件拖放到页面的指定区域时的样式，这个样式是当文件被拖动
到指定区域时，才起到作用的，是通过Javascript击发其起作用的，下文会提到。
HTML5中的文件API
在HTML5中，对文件的API有如下几点的新的改进，其标准可以参考
(http://www.w3.org/TR/file-upload/)。
FileList: 表示已选择的文件，以数组的形式表示。
File: 代表一个单独的文件
FileReader: FileReader是一个接口，它允许我们在客户端读取文件的数据，并且可以在Javascript中去使用。
开始动手写Javascript
下面，我们开始动手编写Javascript，首先我们编写一些工具javascript，比如：
接者，我们编写init方法，去判断文件API的可用性，代码如下：
程序中，首先判断当前浏览器中文件API是否可用，如果可用的话则调用init的初始方法。在init方法中，做了如下几件事情：
为文件的选择框增加了上传的监听事件。
显示#filedrag区域
设置了拖动文件经过放置区域时和文件离开放置区域时的事件以及样式。
设置了当用户将文件拖动到放置区域最后松开鼠标，以决定文件放置时的事件。
这里还隐藏了提交按钮，因为这里并不需要它了。
当然，这里还可以连传统的文件上传浏览框也去掉，但这并不是十分友好，所以这里采用的是两者并存的方式。
而用到了XMLHttpRequest的upload方法，主要是防止在一些浏览器中如果当文件上传API不可用时，则用旧的方法，不显示文件拖拉框，取而代之的是显示传统的上传提交按钮。
考虑到很少用户很熟悉文件的这种拖拉上传用法，因此，我们在事件中对文件放置区域的样式进行设置，当文件被拖拉到区域中时，区域的边框会变成红色，以提醒用户，代码如下：
这里判断是否文件拖拉到区域上方，如果是的话，则采用样式中的hover样式(见上文)。
接下来，我们会在另外的一个div区域中，显示文件上传的小结信息，代码如下：
在FileSelectHandler事件中，实现了如下的功能：
1 调用FileDragHover()方法移除了hover的样式，并且取消浏览器的响应事件，否则的话浏览器会尝试显示文件的内容。
2 将上传的文件放置到FileList对象数组中去，包括用传统文件上传框上传的及用拖拉方法上传的。
3 单独使用一个方法ParseFile输出上传每个文件的具体属性信息，代码如下;
使用Javascript打开客户端文件
现在，我们已经把客户端机器上的文件成功拖拉到浏览器中了，也就是说，我们用新的拖拉的方法，完成了以往要使用传统的文件上传选择框才能完成的工作!接下来，我们尝试通过Javascript，去判断用户上传的文件类型，并学习如何使用Javascript去操作客户端的文件。
首先，为什么要通过Javascript去分析操作客户端的文件呢?假如要求用户上传很多文件，或者上传指定格式的图片，假如用户选好上传文件到服务端后，服务端才判断发现文件不符合要求，再要求用户重新上传的话，给用户的体验则不大友好，所以，希望能在用户在客户端选择完文件后就马上能判断出文件的大小和类型，如果是图片的话，甚至可以实现客户端图片预览的效果。
在HTML5的起草标准中，提供了FileReader接口去处理客户端的文件，有如下几个重要API：
readAsText(File f, [encoding]):将一个文件读入到字符串中去，其中可以选用文件的编码，默认的是UTF-8
.readAsDataURL(File f): 将文件以data URL编码的方式读入文件内容,dat Url方式是一种以BASE64编码在页面中展示文件的方法，详细见：http://en.wikipedia.org/wiki/Data_URI_scheme
.readAsBinaryString(File f): 将文件以二进制方式读取。.readAsArrayBuffer(File f):.将文件作为ArrayBuffer对象的方式读取。ArrayBuffer详见http://www.khronos.org/registry/typedarray/specs/latest/
接下来，我们看下如何在Javascript中异步打开读取文件。
Javascript中异步打开文件
先来复习下之前我们用到的parseFile方法，代码如下：
这里只是简单显示了文件的文件名和文件大小，而接下来我们要判断是这个文件是否属于文件类型的文件(即text/plain,text/html,text/css等)，可以使用FileReader.readAsText()方法读取并且去掉其中的<,>符号，代码如下;
同样，我们希望将一张图片从用户的资源管理器中，拖拉到页面的放置区域后，能马上显示这张图片的实际内容以及大小，可以用如下代码实现：
这里，直接将图片的内容以FileReader的readAsDataURL方法读取入并显示。
最后，我们可以通过http://blogs.sitepointstatic.com/examples/tech/filedrag/2/index.html观看我们的
DEMO演示，请读者尝试从自己电脑上的windows资源管理器中，拖放图片或其他类型文
件到页面的指定区域中，则会发现浏览器能自动识别用户拖放的文件，当然，请使用Chrome
或Firefox浏览器才能看到效果。
小结
在本文中，为读者介绍了HTML5中新的文件处理API，利用文件处理API，可以实现让浏览器识别从用户端拖放到页面的文件，在下一讲中，将重点介绍如何上传这些已经拖放了的文件。
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
http://tech.it168.com/a2011/1207/1285/000001285230_all.shtml
转载请注明出处
在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">
Status Messages
</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";
}
}
程序中，首先判断当前浏览器中文件API是否可用，如果可用的话则调用init的初始方法。在init方法中，做了如下几件事情：
为文件的选择框增加了上传的监听事件。
显示#filedrag区域
设置了拖动文件经过放置区域时和文件离开放置区域时的事件以及样式。
设置了当用户将文件拖动到放置区域最后松开鼠标，以决定文件放置时的事件。
这里还隐藏了提交按钮，因为这里并不需要它了。
当然，这里还可以连传统的文件上传浏览框也去掉，但这并不是十分友好，所以这里采用的是两者并存的方式。
而用到了XMLHttpRequest的upload方法，主要是防止在一些浏览器中如果当文件上传API不可用时，则用旧的方法，不显示文件拖拉框，取而代之的是显示传统的上传提交按钮。
考虑到很少用户很熟悉文件的这种拖拉上传用法，因此，我们在事件中对文件放置区域的样式进行设置，当文件被拖拉到区域中时，区域的边框会变成红色，以提醒用户，代码如下：
function FileDragHover(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == "dragover" ? "hover" : "");
}
这里判断是否文件拖拉到区域上方，如果是的话，则采用样式中的hover样式(见上文)。
接下来，我们会在另外的一个div区域中，显示文件上传的小结信息，代码如下：
function FileSelectHandler(e) {
FileDragHover(e);
// 获得所有的文件列表
var files = e.target.files || e.dataTransfer.files;
// 循环处理每个文件
for (var i = 0, f; f = files[i]; i++) {
ParseFile(f);
}
}
在FileSelectHandler事件中，实现了如下的功能：
1 调用FileDragHover()方法移除了hover的样式，并且取消浏览器的响应事件，否则的话浏览器会尝试显示文件的内容。
2 将上传的文件放置到FileList对象数组中去，包括用传统文件上传框上传的及用拖拉方法上传的。
3 单独使用一个方法ParseFile输出上传每个文件的具体属性信息，代码如下;
function ParseFile(file) {
Output(
"
File information: " + file.name +
" type: " + file.type +
" size: " + file.size +
" bytes
"
);
}
使用Javascript打开客户端文件
现在，我们已经把客户端机器上的文件成功拖拉到浏览器中了，也就是说，我们用新的拖拉的方法，完成了以往要使用传统的文件上传选择框才能完成的工作!接下来，我们尝试通过Javascript，去判断用户上传的文件类型，并学习如何使用Javascript去操作客户端的文件。
首先，为什么要通过Javascript去分析操作客户端的文件呢?假如要求用户上传很多文件，或者上传指定格式的图片，假如用户选好上传文件到服务端后，服务端才判断发现文件不符合要求，再要求用户重新上传的话，给用户的体验则不大友好，所以，希望能在用户在客户端选择完文件后就马上能判断出文件的大小和类型，如果是图片的话，甚至可以实现客户端图片预览的效果。
在HTML5的起草标准中，提供了FileReader接口去处理客户端的文件，有如下几个重要API：
readAsText(File f, [encoding]):将一个文件读入到字符串中去，其中可以选用文件的编码，默认的是UTF-8
.readAsDataURL(File f): 将文件以data URL编码的方式读入文件内容,dat Url方式是一种以BASE64编码在页面中展示文件的方法，详细见：http://en.wikipedia.org/wiki/Data_URI_scheme
.readAsBinaryString(File f): 将文件以二进制方式读取。.readAsArrayBuffer(File f):.将文件作为ArrayBuffer对象的方式读取。ArrayBuffer详见http://www.khronos.org/registry/typedarray/specs/latest/
接下来，我们看下如何在Javascript中异步打开读取文件。
Javascript中异步打开文件
先来复习下之前我们用到的parseFile方法，代码如下：
function ParseFile(file) {
Output(
"
File information: " + file.name +
" type: " + file.type +
" size: " + file.size +
" bytes
"
);
}
这里只是简单显示了文件的文件名和文件大小，而接下来我们要判断是这个文件是否属于文件类型的文件(即text/plain,text/html,text/css等)，可以使用FileReader.readAsText()方法读取并且去掉其中的<,>符号，代码如下;
if (file.type.indexOf("text") == 0) {
var reader = new FileReader();
reader.onload = function(e) {
Output(
"
" + file.name + ":
" +
e.target.result.replace(//g, ">") +
"
"
);
}
reader.readAsText(file);
}
同样，我们希望将一张图片从用户的资源管理器中，拖拉到页面的放置区域后，能马上显示这张图片的实际内容以及大小，可以用如下代码实现：
// display an image
if (file.type.indexOf("image") == 0) {
var reader = new FileReader();
reader.onload = function(e) {
Output(
"[b]" + file.name + ":[/b]
" +
'[img]' + e.target.result + '[/img]
'
);
}
reader.readAsDataURL(file);
这里，直接将图片的内容以FileReader的readAsDataURL方法读取入并显示。
最后，我们可以通过http://blogs.sitepointstatic.com/examples/tech/filedrag/2/index.html观看我们的
DEMO演示，请读者尝试从自己电脑上的windows资源管理器中，拖放图片或其他类型文
件到页面的指定区域中，则会发现浏览器能自动识别用户拖放的文件，当然，请使用Chrome
或Firefox浏览器才能看到效果。
小结
在本文中，为读者介绍了HTML5中新的文件处理API，利用文件处理API，可以实现让浏览器识别从用户端拖放到页面的文件，在下一讲中，将重点介绍如何上传这些已经拖放了的文件。
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
相关 [html5 应用 拖拉] 推荐：
HTML5漫谈（4）–HTML5应用平台:PhoneGAP
- - HTML5研究小组( 程宝平 chengbp @gmail.com）. http://phonegap.com）按官方说法，是HTML5移动应用平台，它包括两部分：. 1) 应用开发框架：采用Web/HTML5技术编写应用，支持设备能力（如GPS、重力感应等）调用；支持能力插件灵活扩展. 图1 PhoneGAP支持设备能力API列表.
Google发布chrome HTML5应用
- Amom - Solidot游戏番茄 写道 "早在5月份Google就宣布旗下产品Gmail、Calendar、Docs将支持基于HTML5离线的访问. 如今终于实现了，上述Web服务以应用的方式发布在Chrome商店. 现在进入相关产品页面会提示是否开启离线功能，并引导安装离线版产品应用. 安装后启动新的chrome窗口会显示已安装的新应用，这样即使你离线的情况下，你仍然可以正常访问和使用已经保存在本地数据库的内容.
应用HTML5须知五则
- 幻幽 or A書 - 36氪HTML5的到来将第五代网络语言带入了多媒体的世界. 尽管HTML5的启动并没有多轰轰烈烈，但是在过去6个月还是有不少的软件开发者开始应用HTML5. 然而，在选择HTML5时，有一些基本注意事项大家还是需要了解的. 网络应用开发工程师们在学习新技术的同时需要时刻记住网络安全. HTML5所购建的网页和其他语言编写的网页一样容易泄露一些敏感数据.
10个HTML5应用演示
- Zhaojing - HTML5研究小组如果你想知道 HTML5 能做些什么，看看下面这些惊艳的动画示例，相信你看完这些例子后会对未来的 Web 发展充满无限期待. 为了有更好的效果，建议在 Chrome 浏览器中浏览.
走进 HTML5：20个惊艳的 HTML5 Canvas 应用试验
- - 博客园_梦想天空如今，HTML5 可谓如众星捧月一般，受到众多业内巨头的青睐. 很多 Web 开发者也尝试着用. HTML5 来制作各种 Web 应用. HTML5 规范引进了很多新特性，其中最令人期待的之一就是 Canvas 元素，HTML5 Canvas 提供了通过. JavaScript 绘制图形的方法，非常强大.
HTML5令人惊叹的应用范例
- 1625 - Design lol 全球设计精华分享详情查看原文: 30 Examples of Websites Using HTML5. 10个HTML5的演示， 让你忘记FLASH.
strobe发布全新HTML5应用平台
- pestwave - 36氪今天，strobe发布了全新的HTML5应用平台. 开发者可以在此平台通过一个标准界面同时为普通电脑，智能手机，平板便携设备开发应用. 仅通过一个界面，开发人员就可以同时管理测试代码和发布代码，支持不同平台（web,Android,iOS等）和多种服务（社交，推送，身份验证等）. strobe创建于2010年，融资250万美金.
HTML5能否取代Android和iOS应用？
- - CSS库大量新生移动设备的兴起，改变了互联网的未来. 在技术的发展上， HTML5会取代App应用吗. 在HTML5规范中，已经加入了相机、磁力罗盘、GPS信息的支持. 很多新兴浏览器也已经开始支持这些新特性. 能否用一个统一的HTML5来替代 android和 ios并行开发的双重成本呢. 以下译自Michael Mahemoff的一篇文章，详细分析了HTML5能否取代Android和iOS应用程序.
AT&T公布HTML5 Web应用API
- - HTML5研究小组北京时间1月10日消息，据国外媒体报道，AT&T首席营销官大卫·克里斯托弗(David Christopher)今天在该公司第六届开发者峰会公布了面向HTML5应用的API(应用编程接口)平台API Catalog. HTML5应用可以在多种设备和移动操作系统上运行. iPhone版Visual Voicemail将是AT&T的首款网络API.