跟著張大神修煉內功

其中就有拖拽上傳的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);
});