GMAIL邮箱的附件拖拽上传功能给部分用户带来及极大的方便，而且一些需要大量上传文件的后台管理中也会感受到拖拽上传文件带来的快捷。

接下来一起了解一下HTML5拖拽上传，基于CHROME浏览器

1. HTML代码

   <div id="drop_area">
          Drag files to this area
   </div>
   

2. 监听拖拽过程中的dragleave、drop、dragenter、dragover事件，首先取消浏览器的默认事件

   $(document).on({
       dragleave:function(e){    //拖离 
           e.preventDefault(); 
       }, 
       drop:function(e){  //拖后放 
           e.preventDefault(); 
       }, 
       dragenter:function(e){    //拖进 
           e.preventDefault(); 
       }, 
       dragover:function(e){    //拖来拖去 
           e.preventDefault(); 
       }
   });
   

3. 监听drop事件

   var box = document.getElementById("drop_area");
   box.addEventListener("drop", function(e){
       e.preventDefault(); // 取消浏览器默认的拖拽效果
       
       // 上传的文件列表
       var fileList = e.dataTransfer.files;
       
       // 上传文件的个数
       if (fileList.length == 0) {
           return false;
      }
      
   },false);
   

4. 接下来的核心功能，Ajax上传

   // 新建一个XHR请求
   var xhr = new XMLHttpRequest(); 
   xhr.open("post", url, true); 
   xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
   
   // 监听上传进度和完成事件
   xhr.upload.addEventListener("progress", function(e){  
       if (e.lengthComputable) {  
           var percentage = Math.round((e.loaded * 100) / e.total);  
           console.log(percentage)  
       }  
   }, false); 
   
   // 上传完成事件
   xhr.upload.addEventListener("load", function(e){  
      
   }, false);  
   

5. 如是图片，显示拖拽上传的文件

   //拖拉图片到浏览器，可以实现预览功能 
   // 图片
   var img = window.webkitURL.createObjectURL(fileList[0]); 
   var filename = fileList[0].name; //图片名称 
   // 图片大小
   var filesize = Math.floor((fileList[0].size)/1024);  
   

6. 模拟fromData上传

   var fd = new FormData(); 
   fd.append('file', fileList[1]); 
   xhr.send(fd);
   

7. 整体JS代码

(function($) {
    $(document).on({
        dragleave:function(e){    //拖离 
            e.preventDefault(); 
        }, 
        drop:function(e){  //拖后放 
            e.preventDefault(); 
        }, 
        dragenter:function(e){    //拖进 
            e.preventDefault(); 
        }, 
        dragover:function(e){    //拖来拖去 
            e.preventDefault(); 
        }
    });
    var box = document.getElementById("drop_area");
    box.addEventListener("drop", function(e){
        e.preventDefault(); // 取消浏览器默认的拖拽效果
        var fileList = e.dataTransfer.files;

        if (fileList.length == 0) {
            return false;
        }
        
        // 循环文件列表，多文件上传 
        for (var i = 0; i < fileList.length; i++) {
            var xhr = new XMLHttpRequest(); 
            // post上传 url上传的url，php处理
            xhr.open("post", url, true); 
            xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
                
              // 监听上传完成 
            xhr.addEventListener("load", function(e){
                // 返回的结果
                var result = jQuery.parseJSON(e.target.responseText)

                // 依据处理返回的json数据处理UI效果
            }, false);

            var fd = new FormData(); 
            // PHP端$_FILES['file']接收
            fd.append('file', fileList[i]); 
            xhr.send(fd);
        }


    }, false);
})(jQuery);

8. 技术要点

   • 监听拖拽：监听页面的拖拽时间，包括：dragleave、drop、dragenter、dragover事件，一定要将浏览器的默认效果取消
   • 获取拖拽文件：在drop时间触发后通过e.dataTransfer.files获取拖拽的文件列表
   • 如需显示，读取文件 window.webkitURL.createObjectURL(fileList[0])
   • 发送图片数据：使用FORMData模拟表单的Ajax提交文件流

本文链接 www.bigcode.top