• HTML5结合plupload插件实现文件拖拽上传功能
  • JANE 发表于 2016/2/19 11:43:00 | 分类标签: html5拖拽 html5上传附件
  • 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拖放只是选择文件的方式,省却了寻找文件的麻烦。
  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:JANE
  • 加入时间:2013/7/16 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮