HTML5拖放（drag and drop）与plupload的懒人上传

HTML5拖放能够将本地的文件拖放到页面上，plupload又是很好的文件上传插件，而今天就将两者结合，做了个文件拖拽上传的功能。

简述HTML5拖放

拖放是HTML5标准的一部分，任何元素都能够拖放，也能够将本地的文件拖放到页面上。

设置元素可拖放

为了使元素可拖动，把 draggable 属性设置为 true

<img draggable="true" />

拖放事件

有7个拖放事件可以捕获，如下：

dragstart：开始拖元素触发

dragenter：元素拖进可drop元素（绑定drop事件的元素）时触发

dragover：当元素拖动到drop元素上时触发

drop：当元素放下到drop元素触发

dragleave ：当元素离开drop元素时触发

drag：每次元素被拖动时会触发

dragend：放开拖动元素时触发

完成一次拖放的事件过程是： dragstart –> dragenter –> dragover –> drop –> dragend

浏览器支持

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

拖拽上传实现

先阻止页面默认的拖放行为，不然页面会被拖放的文件替换了。

//阻止浏览器默认行为
document.addEventListener( "dragleave", function(e) {e.preventDefault();
}, false);
document.addEventListener( "drop", function(e) {e.preventDefault();
}, false);
document.addEventListener( "dragenter", function(e) {e.preventDefault();
}, false);
document.addEventListener( "dragover", function(e) {e.preventDefault();
}, false);

初始化plupload

var uploader = new plupload.Uploader({runtimes : 'html5,flash,silverlight,html4',browse_button :  iElement, //一个触发的元素，写一个隐藏的元素就行url : config.path.storePutFile,flash_swf_url : 'lib/plupload-2.1.8/js/Moxie.swf',silverlight_xap_url : 'lib/plupload-2.1.8/js/Moxie.xap',multiple_queues : false,multi_selection : true,init : {FilesAdded : function(up, files) {this.start();},//上传进度UploadProgress : function(up, file) {console.log("UploadProgress--------------------------------------");},FileUploaded : function(up, file, info) {console.log("FileUploaded--------------------------------------");},Error : function(up, err) {console.log(err); }}
});

设置drop区域

当文件拖放到drop区域时，就能触发上传。

var box = element; //drop区域的DOM元素
box.addEventListener("drop", function (e) {var up = uploader; //plupload的实例对象var fileList = e.dataTransfer.files; //获取文件对象//检测是否是拖拽文件到页面的操作if (fileList.length == 0) {return false;}for(var i = 0; i < fileList.length; i++){var reader = new FileReader();reader.onload = function(e) {up.addFile(file[i]);};reader.onerror = function(e){alert('目前只能上传文件');}reader.readAsDataURL(file[i]);}
}, false);

注意

在addFile到plupload实例时，我加了一层FileReader的读取，是因为HTML5的File对象有问题。HTML5 File对象在接收到文件夹的时候，不能辨别文件夹。例如你上传一个命名为“123.jpg”的文件夹，HTML5 File会认为这是个图片（囧，它是去截取后缀名去做文件类型判断的），而这会导致plupload上传失败。所以我加一层FileReader，当是文件夹时候，会触发onerror，是文件时就触发onload，addFile之后触发上传行为。

总结

上传之所以借助pluoload，是因为它本身支持HTML5上传，而且还提供了上传进度、上传失败回调等功能，可以节省很多功夫（当然可以自己做上传）。而HTML5拖放只是选择文件的方式，省却了寻找文件的麻烦。

本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。

本文地址：http://www.cnblogs.com/lovesong/p/5014584.html

HTML5拖放（drag and drop）与plupload的懒人上传相关推荐

html拖放数据库字段,利用HTML5拖放(Drag 和 Drop)实现Table间数据的交互
前言作为开发者,我们总是会不经意间的遇到一些令人头疼的需求.比如五彩斑斓的黑,根据手机壳变换APP的颜色等等,你说怎么办.虽然在一般情况下不会这么棘手,但是有些需求刚拿到的时候还是会一筹莫展. 表格 ...
HTML5 拖放Drag和drop用法以及事件介绍
dragstart:拖拽开始时在被拖拽元素上触发此事件 drag:拖拽过程中被拖拽的元素会持续不断地发drag事件. dragend:鼠标在拖放目标上释放时,在拖搜元素上触发,将元素从浏览器拖放到操作 ...
html5 drag this,HTML5拖放(drag和drog)
拖放(drag和drog)是HTML5的标准的组成部分,也是种常见的特性,意义为抓起一个元素放入到另外的一个位置,在HTML5中任何元素都可以被拖放,前题是要相关进行设置. 1.设置元素为可拖放,也就 ...
html5css3菜鸟教程,HTML5+CSS3实现拖放(Drag and Drop)示例
本文简单介绍一下HTML5的拖放实现.MXGHTML5中文学习网 - HTML5先行者学习网拖放(Drag 和 drop)是 HTML5 标准的组成部分.MXGHTML5中文学习网 - HTML5先 ...
html组态图动态拖拽,基于HTML5的Drag and Drop生成图片Base64信息
HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...
plupload php实例,thinkPHP5框架整合plupload实现图片批量上传
这篇文章主要介绍了关于thinkPHP5框架整合plupload实现图片批量上传,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下本文实例讲述了thinkPHP5框架整合plupload ...
基于html5拖(drag)放(drop)实现换装小游戏
编码环境:asp.net mvc3 html5 运行环境:firefox浏览器通过. 一:有关html5的拖放功能,网上介绍的一大把,我将自己学习到的知识点总结如下: 1:全局属性draggable ...
[Ext JS 4] 拖放[drag and drop]
定义拖放一个拖动操作,就是在某个页面元素上按下鼠标并移动.一个放下操作,就是在拖动动作之后放开鼠标.可以从下图来看: Ext JS 的Ext.dd 类中定义了基本的拖放操作. 拖放类的组织所有的拖 ...
H5 拖放drag跟drop
H5的拖放功能主要是通过drag和drop来实现的,目前IE9.Firefox.Opera 12.Chrome 以及 Safari 5 是支持拖放的,Safari 5.1.2 中不支持拖放.下面先放一 ...

HTML5拖放（drag and drop）与plupload的懒人上传

HTML5拖放（drag and drop）与plupload的懒人上传相关推荐

最新文章

热门文章