GMAIL郵箱的附件拖拽上傳功能給部分用戶(hù)帶來(lái)及極大的方便企锌，而且一些需要大量上傳文件的后臺(tái)管理中也會(huì)感受到拖拽上傳文件帶來(lái)的快捷砌溺。

接下來(lái)一起了解一下HTML5拖拽上傳升薯，基于CHROME瀏覽器

1. HTML代碼

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

2. 監(jiān)聽(tīng)拖拽過(guò)程中的dragleave意述、drop佣谐、dragenter肚吏、dragover事件，首先取消瀏覽器的默認(rèn)事件

   $(document).on({
       dragleave:function(e){    //拖離 
           e.preventDefault(); 
       }, 
       drop:function(e){  //拖后放 
           e.preventDefault(); 
       }, 
       dragenter:function(e){    //拖進(jìn) 
           e.preventDefault(); 
       }, 
       dragover:function(e){    //拖來(lái)拖去 
           e.preventDefault(); 
       }
   });
   

3. 監(jiān)聽(tīng)drop事件

   var box = document.getElementById("drop_area");
   box.addEventListener("drop", function(e){
       e.preventDefault(); // 取消瀏覽器默認(rèn)的拖拽效果
       
       // 上傳的文件列表
       var fileList = e.dataTransfer.files;
       
       // 上傳文件的個(gè)數(shù)
       if (fileList.length == 0) {
           return false;
      }
      
   },false);
   

4. 接下來(lái)的核心功能狭魂，Ajax上傳

   // 新建一個(gè)XHR請(qǐng)求
   var xhr = new XMLHttpRequest(); 
   xhr.open("post", url, true); 
   xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
   
   // 監(jiān)聽(tīng)上傳進(jìn)度和完成事件
   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. 如是圖片罚攀，顯示拖拽上傳的文件

   //拖拉圖片到瀏覽器，可以實(shí)現(xiàn)預(yù)覽功能 
   // 圖片
   var img = window.webkitURL.createObjectURL(fileList[0]); 
   var filename = fileList[0].name; //圖片名稱(chēng) 
   // 圖片大小
   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){    //拖進(jìn) 
            e.preventDefault(); 
        }, 
        dragover:function(e){    //拖來(lái)拖去 
            e.preventDefault(); 
        }
    });
    var box = document.getElementById("drop_area");
    box.addEventListener("drop", function(e){
        e.preventDefault(); // 取消瀏覽器默認(rèn)的拖拽效果
        var fileList = e.dataTransfer.files;

        if (fileList.length == 0) {
            return false;
        }
        
        // 循環(huán)文件列表雌澄，多文件上傳 
        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"); 
                
              // 監(jiān)聽(tīng)上傳完成 
            xhr.addEventListener("load", function(e){
                // 返回的結(jié)果
                var result = jQuery.parseJSON(e.target.responseText)

                // 依據(jù)處理返回的json數(shù)據(jù)處理UI效果
            }, false);

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


    }, false);
})(jQuery);

8. 技術(shù)要點(diǎn)

   • 監(jiān)聽(tīng)拖拽：監(jiān)聽(tīng)頁(yè)面的拖拽時(shí)間，包括：dragleave镐牺、drop是己、dragenter、dragover事件任柜，一定要將瀏覽器的默認(rèn)效果取消
   • 獲取拖拽文件：在drop時(shí)間觸發(fā)后通過(guò)e.dataTransfer.files獲取拖拽的文件列表
   • 如需顯示卒废，讀取文件 window.webkitURL.createObjectURL(fileList[0])
   • 發(fā)送圖片數(shù)據(jù)：使用FORMData模擬表單的Ajax提交文件流

本文鏈接 www.bigcode.top