js實(shí)現(xiàn)控制文件拖拽并獲取拖拽內(nèi)容功能

更新時(shí)間：2018年02月17日 12:11:55 投稿：laozhang

本片文章主要給大家分享了用JS寫出控制文件拖拽并獲取拖拽內(nèi)容功能實(shí)現(xiàn)過程，以及代碼分享，有興趣的一起學(xué)習(xí)下。

在用戶拖拽文件到瀏覽器的某個(gè)元素上時(shí)，js可以監(jiān)聽到與拖拽相關(guān)的事件，并對拖拽結(jié)果進(jìn)行處理，本文討論下和拖拽文件相關(guān)的一些問題，不過沒有處理太多關(guān)于兼容性的問題。

拖拽事件

js能夠監(jiān)聽到拖拽的事件有drag、dragend、dragenter、dragexit(沒有瀏覽器實(shí)現(xiàn))、dragleave、dragover、dragstart、drop，詳細(xì)的內(nèi)容可以看MDN。

其中，與拖拽文件相關(guān)的事件有dragenter(文件拖拽進(jìn))、dragover(文件拖拽在懸浮)、dragleave(文件拖拽離開)、drop(文件拖拽放下)。

拖拽事件可以綁定到指定的DOM元素上，可以綁定到整個(gè)頁面中。

var dropEle = document.querySelector('#dropZone');
dropEle.addEventListener('drop', function (e) {
  // 
}, false);

document.addEventListener('drop', function (e) {
  // 
}, false);

阻止默認(rèn)行為

一般來說，我們只需要把處理拖拽文件的業(yè)務(wù)邏輯寫到drop事件中就可以了，為什么還要綁定dragenter、dragover、dragleave這三個(gè)事件呢？

因?yàn)楫?dāng)你拖拽一個(gè)文件到?jīng)]有對拖拽事件進(jìn)行處理的瀏覽器中的時(shí)候，瀏覽器會打開這個(gè)文件，比如拖拽一張圖片瀏覽器會打開這個(gè)圖片，在沒有PDF閱讀器的時(shí)候也可以拖拽一個(gè)PDF到瀏覽器中，瀏覽器就會打開這個(gè)PDF文件。

如果瀏覽器打開了拖拽的文件，頁面就跳走了，我們希望得到拖拽的文件，而不是讓頁面跳走。上面說到瀏覽器會打開拖拽的文件是瀏覽器的默認(rèn)行為，我們需要阻止這個(gè)默認(rèn)行為，就需要再上述的事件中進(jìn)行阻止。

dropZone.addEventListener("dragenter", function (e) {
  e.preventDefault();
  e.stopPropagation();
}, false);

dropZone.addEventListener("dragover", function (e) {
  e.preventDefault();
  e.stopPropagation();
}, false);

dropZone.addEventListener("dragleave", function (e) {
  e.preventDefault();
  e.stopPropagation();
}, false);

dropZone.addEventListener("drop", function (e) {
  e.preventDefault();
  e.stopPropagation();
  // 處理拖拽文件的邏輯
}

實(shí)際上dragenter不阻止默認(rèn)行為也不會觸發(fā)瀏覽器打開文件，為了防止某些瀏覽器可能有的兼容性問題，把拖拽周期中的所有的事件都阻止默認(rèn)行為并且阻止了事件冒泡。

獲得拖拽的文件

我們會在drop這個(gè)事件的回調(diào)中的事件對象能夠得到文件對象。

在事件對象中，一個(gè)e.dataTransfer這樣的屬性，它是一個(gè)DataTransfer類型的數(shù)據(jù)，有如下的屬性

屬性	類型	說明
dropEffect	String	用來hack某些兼容性問題
effectAllowed	String	暫時(shí)不用
files	FileList	拖拽的文件列表
items	DataTransferItemList	拖拽的數(shù)據(jù)(有可能是字符串)
types	Array	拖拽的數(shù)據(jù)類型該屬性在Safari下比較混亂

在Chrome中我們用items對象獲得文件，其他瀏覽器用files獲得文件，主要是為了處理拖拽文件夾的問題，最好不允許用戶拖拽文件夾，因?yàn)槲募A內(nèi)可能還有文件夾，遞歸上傳文件會很久，如果不遞歸查找，只上傳目錄第一層級的文件，用戶可能以為上傳功能了，但是沒有上傳子目錄文件，所以還是禁止上傳文件夾比較好，后面我會說要怎么處理。

Chrome獲取文件

dropZone.addEventListener("drop", function (e) {
  e.preventDefault();
  e.stopPropagation();
  
  var df = e.dataTransfer;
  var dropFiles = []; // 存放拖拽的文件對象
  
  if(df.items !== undefined) {
    // Chrome有items屬性，對Chrome的單獨(dú)處理
    for(var i = 0; i < df.items.length; i++) {
      var item = df.items[i];
      // 用webkitGetAsEntry禁止上傳目錄
      if(item.kind === "file" && item.webkitGetAsEntry().isFile) {
        var file = item.getAsFile();
        dropFiles.push(file);
      }
    }
  }
}

其他瀏覽器獲取文件

這里只測試了Safari，其他瀏覽器并沒有測試，不過看完本文一定也有思路處理其他瀏覽器的兼容情況。

dropZone.addEventListener("drop", function (e) {
  e.preventDefault();
  e.stopPropagation();
  
  var df = e.dataTransfer;
  var dropFiles = []; // 存放拖拽的文件對象
  
  if(df.items !== undefined) {
    // Chrome拖拽文件邏輯
  } else {
    for(var i = 0; i < df.files.length; i++) {
      dropFiles.push(df.files[i]);
    }
  }
}

由于Safari沒有item，自然也沒有webkitGetAsEntry，所以在Safari無法確定拖拽的是否是文件還是文件夾。

非Chrome內(nèi)核瀏覽器判斷目錄的方法

瀏覽器獲取到的每個(gè)file對象有四個(gè)屬性：lastModified、name、size、type，其中type是文件的MIME Type，文件夾的type是空的，但是有些文件沒有MIME Type，如果按照type是否為空判斷是不是拖拽的文件夾的話，會誤傷一部分文件，所以這個(gè)方法行。

那么還有什么方法可以判斷呢，思路大概是這樣子的，用戶拖拽的文件和文件夾應(yīng)該是不一樣的東西，用File API操作的時(shí)候應(yīng)該會有區(qū)別，比如進(jìn)行某些操作的時(shí)候，文件就能夠正常操作，但是文件夾就會報(bào)錯(cuò)，通過錯(cuò)誤的捕獲就能夠判斷是文件還是文件夾了，好我們根據(jù)這個(gè)思路來寫一下。

dropZone.addEventListener("drop", function (e) {
  e.preventDefault();
  e.stopPropagation();

  var df = e.dataTransfer;
  var dropFiles = [];
  
  if(df.items !== undefined){
    // Chrome拖拽文件邏輯
  } else {
    for(var i = 0; i < df.files.length; i++){
      var dropFile = df.files[i];
      if ( dropFile.type ) {
        // 如果type不是空串，一定是文件
        dropFiles.push(dropFile);
      } else {
        try {
          var fileReader = new FileReader();
          fileReader.readAsDataURL(dropFile.slice(0, 3));

          fileReader.addEventListener('load', function (e) {
            console.log(e, 'load');
            dropFiles.push(dropFile);
          }, false);

          fileReader.addEventListener('error', function (e) {
            console.log(e, 'error，不可以上傳文件夾');
          }, false);

        } catch (e) {
          console.log(e, 'catch error，不可以上傳文件夾');
        }
      }
    }
  }
}, false);

上面代碼創(chuàng)建了一個(gè)FileReader實(shí)例，通過這個(gè)實(shí)例對文件進(jìn)行讀取，我測試讀取一個(gè)1G多的文件要3S多，時(shí)間有點(diǎn)長，就用slice截取了前3個(gè)字符，為什么是前3個(gè)不是前2個(gè)或者前4個(gè)呢，因?yàn)榇a是我寫的，我開心這么寫唄~

如果load事件觸發(fā)了，就說明拖拽過來的東西是文件，如果error事件觸發(fā)了，就說明是文件夾，為了防止其他可能的潛在錯(cuò)誤，用try包起來這段代碼。

三方應(yīng)用的一點(diǎn)點(diǎn)小hack

經(jīng)過測試發(fā)現(xiàn)通過Mac的Finder拖拽文件沒有問題，但是有時(shí)候文件并不一定在Finder中，也可能在某些應(yīng)用中，有一個(gè)應(yīng)用叫做圈點(diǎn)，這個(gè)應(yīng)用的用戶反饋文件拖拽失效，去看了其他開源文件上傳的源碼，發(fā)現(xiàn)了這樣一行代碼：

dropZone.addEventListener("dragover", function (e) {
  e.dataTransfer.dropEffect = 'copy'; // 兼容某些三方應(yīng)用，如圈點(diǎn)
  e.preventDefault();
  e.stopPropagation();
}, false);

需要把dropEffect置為copy，上網(wǎng)搜了下這個(gè)問題，源碼文檔中也沒有說為什么要加這個(gè)，有興趣的同學(xué)可以找一下為什么。

可以拿來就用的代碼

由于用了FileReader去讀取文件，這是一個(gè)異步IO操作，為了記錄當(dāng)前處理了多少個(gè)文件，以及什么時(shí)候觸發(fā)拖拽結(jié)束的回調(diào)，寫了一個(gè)checkDropFinish的方法一直去比較處理的文件數(shù)量和文件總數(shù)，確定所有文件處理完了后就去調(diào)用完成的回調(diào)。

另外，我在最后調(diào)試異步處理的時(shí)候，用的斷點(diǎn)調(diào)試，發(fā)現(xiàn)斷點(diǎn)調(diào)試在Safari中會導(dǎo)致異步回調(diào)不觸發(fā)，需要自己調(diào)試定制功能的同學(xué)注意下。

// 獲得拖拽文件的回調(diào)函數(shù)
function getDropFileCallBack (dropFiles) {
  console.log(dropFiles, dropFiles.length);
}

var dropZone = document.querySelector("#dropZone");
dropZone.addEventListener("dragenter", function (e) {
  e.preventDefault();
  e.stopPropagation();
}, false);

dropZone.addEventListener("dragover", function (e) {
  e.dataTransfer.dropEffect = 'copy'; // 兼容某些三方應(yīng)用，如圈點(diǎn)
  e.preventDefault();
  e.stopPropagation();
}, false);

dropZone.addEventListener("dragleave", function (e) {
  e.preventDefault();
  e.stopPropagation();
}, false);

dropZone.addEventListener("drop", function (e) {
  e.preventDefault();
  e.stopPropagation();

  var df = e.dataTransfer;
  var dropFiles = []; // 拖拽的文件，會放到這里
  var dealFileCnt = 0; // 讀取文件是個(gè)異步的過程，需要記錄處理了多少個(gè)文件了
  var allFileLen = df.files.length; // 所有的文件的數(shù)量，給非Chrome瀏覽器使用的變量

  // 檢測是否已經(jīng)把所有的文件都遍歷過了
  function checkDropFinish () {
    if ( dealFileCnt === allFileLen-1 ) {
      getDropFileCallBack(dropFiles);
    }
    dealFileCnt++;
  }

  if(df.items !== undefined){
    // Chrome拖拽文件邏輯
    for(var i = 0; i < df.items.length; i++) {
      var item = df.items[i];
      if(item.kind === "file" && item.webkitGetAsEntry().isFile) {
        var file = item.getAsFile();
        dropFiles.push(file);
        console.log(file);
      }
    }
  } else {
    // 非Chrome拖拽文件邏輯
    for(var i = 0; i < allFileLen; i++) {
      var dropFile = df.files[i];
      if ( dropFile.type ) {
        dropFiles.push(dropFile);
        checkDropFinish();
      } else {
        try {
          var fileReader = new FileReader();
          fileReader.readAsDataURL(dropFile.slice(0, 3));

          fileReader.addEventListener('load', function (e) {
            console.log(e, 'load');
            dropFiles.push(dropFile);
            checkDropFinish();
          }, false);

          fileReader.addEventListener('error', function (e) {
            console.log(e, 'error，不可以上傳文件夾');
            checkDropFinish();
          }, false);

        } catch (e) {
          console.log(e, 'catch error，不可以上傳文件夾');
          checkDropFinish();
        }
      }
    }
  }
}, false);

您可能感興趣的文章: