php drag drop mysql_使用jquery实现Drag和Drop功能

最近这周一直在研究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 }