拖拽上传

跟着张大神修炼内功

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