最近这周一直在研究jquery的form 插件，无意中看到了他里面使用ajax实现提交文件的功能，经过一路追踪发现了html5新增的drag和drop事件，碰到了一些棘手的问题，最后受这篇外文博客的启发解决了，现翻译原文如下：
原文：(http://jxs.me/2010/09/20/drag-and-drop-with-jquery/)
上周我测试了firefox和chrome的新的APIs，drag和drop事件，他们使你的web app实现简单的桌面拖放的效果。
1. 处理拖动事件drag
请思考下当你拖动一个文件到浏览器窗口，你的浏览器将获得这个文件并尝试打开它，为了改变浏览器的这种默认处理行为，你需要告诉浏览器：“No thanks,I'll take it from here.” 为了阻止浏览器的默认动作，你需要调用两个事件对象函数：stopPropegation()和preventDefault(),前者会阻止流冒泡到其他处理器，后者阻止浏览器执行默认的动作如打开文件。
1 function ignoreDrag(e) { 2 e.originalEvent.stopPropagation(); 3 e.originalEvent.preventDefault(); 4 }
在这种情况下，你使用jquery时，就需要使用他的事件属性originalEvents去访问stopPropegation()和preventDefault(),你同时也要将ignoreDrag()函数绑定到目标的dragenter和dragover事件上。
1 $('#target') 2 .bind('dragenter', ignoreDrag) 3 .bind('dragover', ignoreDrag); 4 .bind('drop', drop);
你能够使用这些事件改变目标的样式，从而使用户知道文件已经拖放到了目标对象上。
2. 处理Drop事件
既然你已经阻止了浏览器默认的拖拽行为，你需要自定义文件拖放动作，drop事件对象有一个idataTransfer属性，它包含了什么文件被拖放到了目标对象中的信息，要访问像text和urls数据，调用getData()函数并传递给它一个type参数，要访问文件请使用files属性去获取一个文件对象数组。
1 function drop(e) { 2 ignoreDrag(e); 3 var dt = e.originalEvent.dataTransfer; 4 var files = dt.files; 5
6 if(dt.files.length > 0){ 7 var file = dt.files[0]; 8 alert(file.name); 9 } 10 }
文件对象包含了文件的名字和大小信息，它能够传递给XMLHttpReguest对象并发送二进制数据，这对于使用拖放功能上传文件非常有帮助，Andrea Giammarchi 写了一个小的发送文件的库 sendfile，用于上传一组文件对象，以下面这种方式使用：
1 function drop(e) { 2 ignoreDrag(e); 3 var dt = e.originalEvent.dataTransfer; 4 var droppedFiles = dt.files; 5
6 if(dt.files.length > 0){ 7 sendMultipleFiles({ 8 files: droppedFiles, 9 url: 'http://mywebsite.com/upload', 10 onload: function (){ alert('Done'); } 11 }); 12 } 13 }
3. firefox中的客户端读取文件
firefox允许你使用以下三种方式从一个文件对象中读取数据：getAsBinary(), getAsDataURL(), getAsText(encoding),第一种用于读取原始的二进制文件，getAsDataURL函数会返回一个base-64格式的字符串，getAsText()会放回一个指定字符编码的字符串。
使用getAsDataURL()返回的字符串，并将其放在img元素的src属性中，就可以访问到这个图片文件。
1 function drop(e) { 2 ignoreDrag(e); 3 var dt = e.originalEvent.dataTransfer; 4 var files = dt.files; 5 6 if(dt.files.length > 0){ 7 $(this).attr('src', files[0].getAsDataURL()); 8 } 9 }