最近这周一直在研究jquery的form 插件,无意中看到了他里面使用ajax实现提交文件的功能,经过一路追踪发现了html5新增的drag和drop事件,碰到了一些棘手的问题,最后受这篇外文博客的启发解决了,现翻译原文如下:
上周我测试了firefox和chrome的新的APIs,drag和drop事件,他们使你的web app实现简单的桌面拖放的效果。
1. 处理拖动事件drag
请思考下当你拖动一个文件到浏览器窗口,你的浏览器将获得这个文件并尝试打开它,为了改变浏览器的这种默认处理行为,你需要告诉浏览器:“No thanks,I'll take it from here.” 为了阻止浏览器的默认动作,你需要调用两个事件对象函数:stopPropegation()和preventDefault(),前者会阻止流冒泡到其他处理器,后者阻止浏览器执行默认的动作如打开文件。
1 functionignoreDrag(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 functiondrop(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 functiondrop(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属性中,就可以访问到这个图片文件。
1functiondrop(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 }