在js中如何實現控製檔拖曳並取得拖曳內容功能

本片文章主要給大家分享了用JS寫出控製文件拖曳並獲取拖曳內容功能實現過程，以及程式碼分享，有興趣的一起學習下。

在使用者拖曳文件到瀏覽器的某個元素上時，js可以監聽到與拖曳相關的事件，並對拖曳結果進行處理，本文討論下和拖曳文件相關的一些問題，不過沒有處理太多關於相容性的問題。

拖曳事件

js能夠監聽到拖曳的事件有drag、dragend、dragenter、dragexit(沒有瀏覽器實作)、dragleave、dragover、dragstart、drop，詳細的內容可以看MDN。

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

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

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

阻止預設行為

一般來說，我們只需要把處理拖曳檔案的業務邏輯寫到drop事件中就可以了，為什麼還要綁定dragenter、dragover、dragleave這三個事件呢？

因為當你拖曳一個文件到沒有對拖曳事件進行處理的瀏覽器中的時候，瀏覽器會打開這個文件，例如拖曳一張圖片瀏覽器會打開這個圖片，在沒有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不阻止預設行為也不會觸發瀏覽器開啟文件，為了防止某些瀏覽器可能有的兼容性問題，把拖曳週期中的所有的事件都阻止預設行為並且阻止了事件冒泡。

獲得拖曳的檔案

我們會在drop這個事件的回呼中的事件物件能夠得到檔案物件。

在事件物件中，一個e.dataTransfer這樣的屬性，它是一個DataTransfer類型的數據，有如下的屬性

屬性	類型	說明
dropEffect	String	用來hack某些相容性問題
effectAllowed	String	#暫時不用
files	FileList	拖曳的檔案清單
items	DataTransferItemList	#拖曳的資料(有可能是字串)
types	Array	拖曳的資料類型該屬性在Safari下比較混亂

在Chrome中我们用items对象获得文件，其他浏览器用files获得文件，主要是为了处理拖拽文件夹的问题，最好不允许用户拖拽文件夹，因为文件夹内可能还有文件夹，递归上传文件会很久，如果不递归查找，只上传目录第一层级的文件，用户可能以为上传功能了，但是没有上传子目录文件，所以还是禁止上传文件夹比较好，后面我会说要怎么处理。

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内核浏览器判断目录的方法

浏览器获取到的每个file对象有四个属性：lastModified、name、size、type，其中type是文件的MIME Type，文件夹的type是空的，但是有些文件没有MIME Type，如果按照type是否为空判断是不是拖拽的文件夹的话，会误伤一部分文件，所以这个方法行。

那么还有什么方法可以判断呢，思路大概是这样子的，用户拖拽的文件和文件夹应该是不一样的东西，用File API操作的时候应该会有区别，比如进行某些操作的时候，文件就能够正常操作，但是文件夹就会报错，通过错误的捕获就能够判断是文件还是文件夹了，好我们根据这个思路来写一下。

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(&#39;load&#39;, function (e) {
            console.log(e, &#39;load&#39;);
            dropFiles.push(dropFile);
          }, false);
          fileReader.addEventListener(&#39;error&#39;, function (e) {
            console.log(e, &#39;error，不可以上传文件夹&#39;);
          }, false);
        } catch (e) {
          console.log(e, &#39;catch error，不可以上传文件夹&#39;);
        }
      }
    }
  }
}, false);

上面代码创建了一个FileReader实例，通过这个实例对文件进行读取，我测试读取一个1G多的文件要3S多，时间有点长，就用slice截取了前3个字符，为什么是前3个不是前2个或者前4个呢，因为代码是我写的，我开心这么写呗~

如果load事件触发了，就说明拖拽过来的东西是文件，如果error事件触发了，就说明是文件夹，为了防止其他可能的潜在错误，用try包起来这段代码。

三方应用的一点点小hack

经过测试发现通过Mac的Finder拖拽文件没有问题，但是有时候文件并不一定在Finder中，也可能在某些应用中，有一个应用叫做圈点，这个应用的用户反馈文件拖拽失效，去看了其他开源文件上传的源码，发现了这样一行代码：

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

需要把dropEffect置为copy，上网搜了下这个问题，源码文档中也没有说为什么要加这个，有兴趣的同学可以找一下为什么。

可以拿来就用的代码

由于用了FileReader去读取文件，这是一个异步IO操作，为了记录当前处理了多少个文件，以及什么时候触发拖拽结束的回调，写了一个checkDropFinish的方法一直去比较处理的文件数量和文件总数，确定所有文件处理完了后就去调用完成的回调。

另外，我在最后调试异步处理的时候，用的断点调试，发现断点调试在Safari中会导致异步回调不触发，需要自己调试定制功能的同学注意下。

// 获得拖拽文件的回调函数
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'; // 兼容某些三方应用，如圈点
  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; // 所有的文件的数量，给非Chrome浏览器使用的变量
  // 检测是否已经把所有的文件都遍历过了
  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);

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

vue注册组件的几种方式总结

Vue.js自定义事件的表单输入组件方法

layui之select的option叠加问题的解决方法

以上是在js中如何實現控製檔拖曳並取得拖曳內容功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！