拖拽上傳

跟着張大神修煉內功

其中就有拖拽上傳的demo

https://www.zhangxinxu.com/study/201109/html5-file-image-ajax-upload.html

精簡版：

https://www.zhangxinxu.com/study/201809/datatransfer-files.php

 

DataTransfer.files

DataTransfer.files，其對應的列表只就是咱們拖進去的文件列表。

DataTransfer.items

DataTransfer.items能夠用來獲取拖拽的數據信息，只讀。

DataTransfer.items爲DataTransferItem類型的數據列表集合，而DataTransferItem又包含多個屬性和方法，屬性包括kind和type，方法包括getAsString()和getAsFile()，這個和剪切板item對象方法是一致的。

 

使用模板（一樣能夠用於剪切板對象clipboardData.items）

handleDataTransferItems = function (items) {
  for (var i = 0; i < items.length; i += 1) {
    var kind = items[i].kind;
    var type = items[i].type;
    // 邏輯開始
    if (kind == 'string') {
      if (type.indexOf('text/plain') != -1) {
        items[i].getAsString(function (str) {
          // str是純文本，該怎麼處理，就在這裏處理
        });   
      } else if (type.indexOf('text/html') != -1) {
        items[i].getAsString(function (str) {
          // str是富文本，就在這裏處理
        });
      } else if (type.indexOf('text/uri-list') != -1) {
        items[i].getAsString(function (str) {
          // str是uri地址，在這裏進行處理
        });
      }
    } else if (kind == 'file') {
      // 若是是圖片
      if (type.indexOf('image/') != -1) {
        var file = items[i].getAsFile();
        // file就是圖片文件對象，能夠上傳，或者其餘處理
      }
    }
  }
};

圖片的話

能夠調用getAsFile()方法將其轉換成二進制文件對象，而後能夠ajax上傳等處理。

使用示例：

document.addEventListener('drop', function (event) {
    var items = event.dataTransfer.items || [];
    handleDataTransferItems(items);
});