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

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

創(chuàng)新互聯(lián)公司主要從事網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)浦城,十載網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

拖拽事件

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

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

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

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

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

阻止默認行為

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

因為當你拖拽一個文件到?jīng)]有對拖拽事件進行處理的瀏覽器中的時候，瀏覽器會打開這個文件，比如拖拽一張圖片瀏覽器會打開這個圖片，在沒有PDF閱讀器的時候也可以拖拽一個PDF到瀏覽器中，瀏覽器就會打開這個PDF文件。

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

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();
  // 處理拖拽文件的邏輯
}

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

獲得拖拽的文件

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

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

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

在Chrome中我們用items對象獲得文件，其他瀏覽器用files獲得文件，主要是為了處理拖拽文件夾的問題，最好不允許用戶拖拽文件夾，因為文件夾內(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的單獨處理
    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)核瀏覽器判斷目錄的方法

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

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

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)建了一個FileReader實例，通過這個實例對文件進行讀取，我測試讀取一個1G多的文件要3S多，時間有點長，就用slice截取了前3個字符，為什么是前3個不是前2個或者前4個呢，因為代碼是我寫的，我開心這么寫唄~

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

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

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

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

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

可以拿來就用的代碼

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

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

// 獲得拖拽文件的回調(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)用，如圈點
  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; // 讀取文件是個異步的過程，需要記錄處理了多少個文件了
  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);

標題名稱：js實現(xiàn)控制文件拖拽并獲取拖拽內(nèi)容功能
網(wǎng)站鏈接：http://aaarwkj.com/article0/godeio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、定制網(wǎng)站、定制開發(fā)、建站公司、App設(shè)計、網(wǎng)站設(shè)計

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

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

拖拽事件

阻止默認行為

獲得拖拽的文件