拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

原文：http://blog.bingo929.com/renren-drag-drop-photo-filereader-formdata.html

您还可以参考以下HTML5/CSS3相关文章:
《使用CSS3开启GPU硬件加速提升网站动画渲染性能》
《HTML5 Drag&Drop 拖拽、FileReader实例教程》
《HTML5 WebSockets 基础使用教程》
《关于HTML 5 canvas 的基础教程》
《让所有IE支持HTML5的解决方案》
《一起感受HTML5和CSS3的能量》

　　关于这个拖拽上传，其实国外有很多网站已经有这样的应用，最早推出拖拽上传应用的是Gmail，它支持标准浏览器下拖拽本地文件到浏览器中作为邮件的附件发送。人人网的这个拖拽上传也是同理，可以让使用标准浏览器的用户通过简单的拖拽行为，将本地文件夹中的照片直接上传到人人网，用户体验能得到提升的同时，也希望借此机会推广一下标准浏览器，淘汰IE。人人网当时也向广大用户推出升级浏览器活动，并喊出口号：”工欲善其计算机，必先利其浏览器”。本次拖拽上传的宣传口号：你敢”脱”，我就敢上传…

　　言归正题，首先看看效果，大家如果有人人网帐号的话可以在首页试一试拖拽上传功能，下面是演示视频：

>

拖拽上传应用主要使用了以下HTML5技术：

• Drag&Drop : HTML5基于拖拽的事件机制.
• File API :  可以很方便的让Web应用访问文件对象，File API包括FileList、Blob、File、FileReader、URI scheme，本文主要讲解拖拽上传中用到的FileList和FileReader接口。
• FormData : FormData是基于XMLHttpRequest Level 2的新接口，可以方便web应用模拟Form表单数据，最重要的是它支持文件的二进制流数据，这样我们就能够通过它来实现AJAX向后端发送文件数据了。

HTML5 Drag&Drop 拖拽事件

　　关于Drag&Drop拖拽事件，之前我写过一篇专门介绍的文章《给力的 Google HTML5 训练营(HTML5 Drag&Drop 拖拽、FileReader实例教程)》，那篇文章详细讲解了Drag & Drap事件的原理和代码实例，这里的拖拽上传实现原理基本上是一样的，大家有兴趣或不太了解的话可以先看看那篇文章，我在这里就不再过多啰嗦了~下面直接出拖拽上传简要代码实例：

var oDragWrap  = document. body ;

//拖进
oDragWrap. addEventListener ( 'dragenter' ,  function (e )  {
　e. preventDefault ( ) ;
} ,  false ) ;

//拖离
oDragWrap. addEventListener ( 'dragleave' ,  function (e )  {
　dragleaveHandler (e ) ;
} ,  false ) ;

//拖来拖去 , 一定要注意dragover事件一定要清除默认事件
//不然会无法触发后面的drop事件
oDragWrap. addEventListener ( 'dragover' ,  function (e )  {
　e. preventDefault ( ) ;
} ,  false ) ;

//扔
oDragWrap. addEventListener ( 'drop' ,  function (e )  {
　dropHandler (e ) ;
} ,  false ) ;

var dropHandler  =  function (e )  {
//将本地图片拖拽到页面中后要进行的处理都在这
}

获取文件数据 HTML5 File API

　　在之前那篇文章中我也有介绍过关于File API中的FileReader接口，作为 File API 的一部分，FileReader专门用于读取文件，根据 W3C 的定义，FileReader 接口 “提供一些读取文件的方法与一个包含读取结果的事件模型”。关于FileReader的详细介绍和代码实例大家可以先去看看那篇文章。

　　今天我着重介绍一下File API中的FileList接口,它主要通过两个途径获取本地文件列表，一是<input type=”file”>的表单形式，另一种则是e.dataTransfer.files拖拽事件传递的文件信息。很显然，我们这里会用到后者。

var fileList  = e. dataTransfer. files ;

　　使用files方法将会获取到拖拽文件的数组形势的数据，每个文件占用一个数组的索引，如果该索引不存在文件数据，将返回null值。可以通过length属性获取文件数量.

var fileNum  = fileList. length ;

　　拖拽上传需要注意的是需要判断两个条件，1:拖拽的是文件不是页面中的元素; 2:拖拽的是图片而不是其它文件,可以通过file.type属性获取文件的类型

//检测是否是拖拽文件到页面的操作
if  (fileList. length  ===  0 )  { return ; } ;
//检测文件是不是图片
if  (fileList [ 0 ]. type. indexOf ( 'image' )  ===  - 1 )  { return ; }

　　下面让我们来看看如何结合之前的拖拽事件来实现拖拽图片并在页面中进行预览：

var dropHandler  =  function (e )  {
　e. preventDefault ( ) ;

　 //获取文件列表
　 var fileList  = e. dataTransfer. files ;

　 //检测是否是拖拽文件到页面的操作
　 if  (fileList. length  ==  0 )  { return ; } ;

　 //检测文件是不是图片
　 if  (fileList [ 0 ]. type. indexOf ( 'image' )  ===  - 1 )  { return ; }

　 //实例化file reader对象
　 var reader  =  new FileReader ( ) ;
　 var img  = document. createElement ( 'img' ) ;

　reader. onload  =  function (e )  {
　　img. src  =  this. result ;
　　oDragWrap. appendChild (img ) ;
　 }
　reader. readAsDataURL (fileList [ 0 ] ) ;

}

　　这里有一个简单的拖拽图片预览的Demo

　　这时你如果用FireBug等类似调试工具查看DOM的话，会看到<img>标签的src属性是一个超长的文件二进制数据，所以如果DOM有很多这类图片，那就要当心浏览器性能了，因为这些数据极大地扩充的页面的代码量，而每次页面的reflow都会对浏览器形成很大的负担，So,如果这些图片还在DOM中，那就尽量不要做动画或任何重绘操作，如果真的要做就尽量让图片脱离文档流，让其绝对定位比较靠谱。

补充：可以使用window.URL.createObjectURL(file)来获取文件的URL(Chrome下用window.webkitURL.createObjectURL(file))，这种方式获取的URL要比上面说的readAsDataURL简短很多。而且可以省去使用FileReader。下面是使用readAsDataURL与createObjectURL生成的<img>代码对比：

优化后的代码：

var dropHandler  =  function (e )  {
　e. preventDefault ( ) ;

　 var fileList  = e. dataTransfer. files ;　　 //获取文件列表
　 var img  = document. createElement ( 'img' ) ;

　 //检测是否是拖拽文件到页面的操作
　 if  (fileList. length  ==  0 )  { return ; } ;

　 //检测文件是不是图片
　 if  (fileList [ 0 ]. type. indexOf ( 'image' )  ===  - 1 )  { return ; }
　
　 if  (window. URL. createObjectURL )  {
　　 //FF4+
　　img. src  = window. URL. createObjectURL (fileList [ 0 ] ) ;
　 }  else  if  (window. webkitURL. createObjectURL )  {
　　 //Chrome8+
　　img. src  = window. webkitURL. createObjectURL (fileList [ 0 ] ) ;
　 }  else  {
　　 //实例化file reader对象
　　 var reader  =  new FileReader ( ) ;

　　reader. onload  =  function (e )  {
　　　img. src  =  this. result ;
　　　oDragWrap. appendChild (img ) ;
　　 }
　　reader. readAsDataURL (fileList [ 0 ] ) ;
　 }
}

　　需要注意的是，window.URL.createObjectURL是有生命周期的，也就意味着你每用此方法获取URL，其生命周期都会和DOM一样，它会单独占用内存，所以当删除图片或不再需要它是，记得用window.URL.revokeObjectURL(file)来释放其内存。当然，如果你没有释放，刷新页面也是可以释放的。

AJAX上传图片(file.getAsBinary & FormData)

　　既然已经获取到了拖拽到web页面中图片的数据，下一步就是将其发送到服务器端了。

　　话说HTML5时代之前，AJAX传输文件二进制流数据是不可能完成的事情，而现在我们完全可以通过file.getAsBinary获取文件的二进制数据流，进而将其当做XHR的data数据传送到后端，8过由于Chrome不支持file的getAsBinary方法，FF3.6+支持此方法。所以Chrome就要另寻它法了，这时我们发现XMLHttpRequest Level 2中的FormData接口完美解决了这个问题，它可以很快捷的模拟Form表单数据并通过AJAX发送至后端，FormData的支持情况是FF5及以上支持，Chrome12及以上支持。

　　 file.getAsBinary获取文件流很简单，但是要想上传数据，就要模拟一下表单的数据格式了，首先看看模拟表单的js代码, FormData模拟表单数据时更是简洁，不用麻烦的去拼字符串，而是直接将数据append到formdata对象中即可：

var xhr  =  new XMLHttpRequest ( ) ;
var url  =  'http://upload.renren.com/......' ;
var boundary  =  '-----------------------'  +  new Date ( ). getTime ( ) ;
var fileName  = file. name ;

xhr. open ( "post" , url ,  true ) ;
xhr. setRequestHeader ( 'Content-Type' ,  'multipart/form-data; boundary='  + boundary ) ;

if  (window. FormData )  {
　 //Chrome12+
　 var formData  =  new FormData ( ) ;
　formData. append ( 'file' , file ) ;
　formData. append ( 'hostid' , userId ) ;
　formData. append ( 'requestToken' , t ) ;

　data  = formData ;
}  else  if  (file. getAsBinary )  {
　 //FireFox 3.6+
　data  =  "--"  +
　boundary  +
　crlf  +
　 "Content-Disposition: form-data; "  +
　 "name=\""  +
　 'file'  +
　 "\"; "  +
　 "filename=\""  +
　unescape (encodeURIComponent (file. name ) )  +
　 "\""  +
　crlf  +
　 "Content-Type: image/jpeg"  +
　crlf  +
　crlf  +
　file. getAsBinary ( )  +
　crlf  +
　 "--"  +
　boundary  +
　crlf  +
　 "Content-Disposition: form-data; "  +
　 "name=\"hostid\""  +
　crlf  +
　crlf  +
　userId  +
　crlf  +
　 "--"  +
　boundary  +
　crlf  +
　 "Content-Disposition: form-data; "  +
　 "name=\"requestToken\""  +
　crlf  +
　crlf  +
　t  +
　crlf  +
　 "--"  +
　boundary  +
　 '--' ;
}

xhr. send (data ) ;

首先表单数据headers头信息需要以下两项：

• Content-Type ： 设置其为multipart/form-data来模拟表单数据
• boundary ： 表单数据中的分隔符，用于分隔不同的文件或表单项，这是服务器端设置的格式。

发送时的post数据类似这样：

------------------------- 1323611763556
Content -Disposition : form -data ;  name = "file" ; filename = "4.jpg"
Content -Type : image /jpeg

ÿØÿà�JFIF�...这里是文件二进制流...~iúoî­5P %-vãîHü 4QHgÿÙ
------------------------- 1323611763556
Content -Disposition : form -data ;  name = "hostid"

229421603
----------------------------- 1323612996486

Content -Disposition : form -data ;  name = "requestToken"

369009193
------------------------- 1323611763556 --

好了，现在文件上传成功后你就可以按照平常AJAX的操作来进行后续处理了。

最后，再来总结一下拖拽上传的技术要点：

1. 监听拖拽：监听页面元素的拖拽事件，包括：dragenter、dragover、dragleave和drop，一定要将dragover的默认事件取消掉，不然无法触发drop事件。如需拖拽页面里的元素，需要给其添加属性draggable=”true”；
2. 获取拖拽文件：在drop事件触发后通过e.dataTransfer.files获取拖拽文件列表，.length属性获取文件数量，.type属性获取文件类型。
3. 读取图片数据并添加预览图：实例化FileReader对象，通过其readAsDataURL(file)方法获取文件二进制流，并监听其onload事件，将e.result赋值给img的src属性，最后将图片append到DOM中。
4. 发送图片数据：使用file.getAsBinary 和 FormData分别模拟表单数据AJAX提交文件流。