• HTML5结合plupload插件实现文件拖拽上传功能
  • 发布于 2个月前
  • 447 热度
    0 评论
  • 董闵行
  • 1 粉丝 37 篇博客
  •   
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拖放只是选择文件的方式,省却了寻找文件的麻烦。
用户评论