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拖放只是选择文件的方式,省却了寻找文件的麻烦。
本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。
HTML5拖放(drag and drop)与plupload的懒人上传的更多相关文章
- HTML5 拖放---drag和drop
拖放四步走:第一步:设置元素可拖放,即把 draggable属性设置为 true: 例:<div id="div" draggable="true"&g ...
- 基于HTML5的Drag and Drop生成图片Base64信息
HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...
- 解决HTML5实现一键拨号、一键发短信及上传头像兼容性问题
HTML5实现一键拨号,一键发短信以及上传头像等问题都是比较常见的场景,近期在做移动端项目的时候遇到阻挠,通过查找资料解决了问题: 废话不多说,直接上案例代码: HTML5实现一键拨号: <a ...
- 关于plupload组件无法拍照上传的解决方案
关于plupload组件无法拍照上传的解决方案 其实是由于文件大小的问题 filters: { max_file_size: '2mb',//把这个调大些就可以了 前提是服务器支持 prevent_d ...
- HTML5 之拖放(drag与drop)
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...
- HTML5拖放(drag和drog)
拖放(drag和drog)是HTML5的标准的组成部分,也是种常见的特性,意义为抓起一个元素放入到另外的一个位置,在HTML5中任何元素都可以被拖放,前题是要相关进行设置. 1.设置元素为可拖放,也就 ...
- 通过HTML5的Drag and Drop生成拓扑图片Base64信息
HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过 ...
- plupload+struts2实现文件上传下载
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" ...
- plupload.Uploader多文件上传
.前台 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CommonUpfi ...
随机推荐
- 理解Docker容器的进程管理
摘要: Docker在进程管理上有一些特殊之处,如果不注意这些细节中的魔鬼就会带来一些隐患.另外Docker鼓励"一个容器一个进程(one process per container)&qu ...
- Hadoop学习笔记—MapReduce的理解
我不喜欢照搬书上的东西,我觉得那样写个blog没多大意义,不如直接把那本书那一页告诉大家,来得省事.我喜欢将我自己的理解.所以我会说说我对于Hadoop对大量数据进行处理的理解.如果有理解不对欢迎批评 ...
- Cocos2d-x 3.2 学习笔记(十三)CocoStudio UI编辑器 by 保卫萝卜
关于编辑器部分研究的不多,但基本能使用.最近时间不是很多,因此写blog的次数越来越少了.自从玩了<保卫萝卜>时候一直想要写一下,同时练下手感.基本的结构已经写的差不多了,主要完善写UI和 ...
- GDB 和 windbg 命令对照(转载)
From:http://blog.csdn.net/joeleechj/article/details/10020501 命令 ...
- 把图片加载到BufferedImage中
把图片加载到BufferedImage 中有什么作用呢?它就可以利用 ImageIO.write(image, "JPEG", response.getOutputStream() ...
- java类加载器-前序
前序 前几天,一个人经常在QQ群里问一些java热更新的知识.后来他实现了热更新,但是还是遇到各种问题.我给他做了解答,并看了下他写的类加载器,他的实现大概是这样子的: (问我此问题的网友,如果你看到 ...
- EF总结
1.Entity Framework 查询历史最严重bug求解十万火急 2.http://www.cnblogs.com/badly1984/p/3203565.html 3.Entity Frame ...
- C# 目录(文件夹)复制实现
private static void CopyDir(DirectoryInfo origin, string target) { if (!target.EndsWith("\\&quo ...
- jquery的promise实践--连续加载图片
在javascript设计模式实践之代理模式--图片预加载中用代理模式实现了图片预加载功能. 现在就更进一步,完成一个能够一张一张的连续图片加载的功能. 功能: 1.一张一张加载图片. 2.加载错误, ...
- jQuery实用的语法总结
1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...