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拖放只是选择文件的方式，省却了寻找文件的麻烦。
本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。