HTML5拖放(drag and drop)与plupload的懒人上传
2015-12-02 22:40
411 查看
HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能。
[b]简述HTML5拖放[/b]
拖放是HTML5标准的一部分,任何元素都能够拖放,也能够将本地的文件拖放到页面上。
设置元素可拖放
为了使元素可拖动,把 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 支持拖放。
[b]拖拽上传实现[/b]
先阻止页面默认的拖放行为,不然页面会被拖放的文件替换了。
初始化plupload
设置drop区域
当文件拖放到drop区域时,就能触发上传。
[b]注意[/b]
在addFile到plupload实例时,我加了一层FileReader的读取,是因为HTML5的File对象有问题。HTML5 File对象在接收到文件夹的时候,不能辨别文件夹。例如你上传一个命名为“123.jpg”的文件夹,HTML5 File会认为这是个图片(囧,它是去截取后缀名去做文件类型判断的),而这会导致plupload上传失败。所以我加一层FileReader,当是文件夹时候,会触发onerror,是文件时就触发onload,addFile之后触发上传行为。
[b]总结[/b]
上传之所以借助pluoload,是因为它本身支持HTML5上传,而且还提供了上传进度、上传失败回调等功能,可以节省很多功夫(当然可以自己做上传)。而HTML5拖放只是选择文件的方式,省却了寻找文件的麻烦。
本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。
本文地址 :/article/5232758.html
[b]简述HTML5拖放[/b]
拖放是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 支持拖放。
[b]拖拽上传实现[/b]
先阻止页面默认的拖放行为,不然页面会被拖放的文件替换了。
//阻止浏览器默认行为 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);
[b]注意[/b]
在addFile到plupload实例时,我加了一层FileReader的读取,是因为HTML5的File对象有问题。HTML5 File对象在接收到文件夹的时候,不能辨别文件夹。例如你上传一个命名为“123.jpg”的文件夹,HTML5 File会认为这是个图片(囧,它是去截取后缀名去做文件类型判断的),而这会导致plupload上传失败。所以我加一层FileReader,当是文件夹时候,会触发onerror,是文件时就触发onload,addFile之后触发上传行为。
[b]总结[/b]
上传之所以借助pluoload,是因为它本身支持HTML5上传,而且还提供了上传进度、上传失败回调等功能,可以节省很多功夫(当然可以自己做上传)。而HTML5拖放只是选择文件的方式,省却了寻找文件的麻烦。
本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。
本文地址 :/article/5232758.html
相关文章推荐
- CDH5.1使用CDH Manager安装
- WEB笔记-让HTML5向下兼容的策略
- 《HTML5与CSS3基础教程》第11、14-16、18章
- WordPress -NewsPlus主题-博客新闻杂志门户,完美中/英文主题
- AWS-CDH5.5安装-软件下载
- AWS-CDH5.5安装 CM配置节点
- 打造自己的html5视频播放器
- 前端知乎:js+div还原80后怀旧经典赛车游戏 谁说html5动画非得用canvas?
- 如何让旧浏览器支持HTML5新标签
- html5视频简介
- HTML5 为什么这么火?
- 利用html5的本地存储功能实现登录用户信息保存
- HTML5应用——生日快乐动画之星星
- 《HTML5与CSS3基础教程》第6-10章
- 学习html5(4)
- HTML5----大牛对HTML5的思考总结(一)(笔记篇)
- AWS-CDH5.5安装-安装
- html5自动定位
- HTML5基本标签、样式
- HTML5中使用不同type的属性将会呈现不同的键盘样式