拖拽上传

最新推荐文章于 2025-09-13 23:06:41 发布

转载最新推荐文章于 2025-09-13 23:06:41 发布 · 89 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2367690/blog/2250473

文章标签：

#python #php

本文详细介绍了HTML5中拖拽上传功能的实现，利用DataTransfer对象处理文件及数据信息，包括DataTransfer.files和DataTransfer.items的使用，以及如何通过getAsFile()将拖拽的图片转换为二进制文件对象进行上传。

2019独角兽企业重金招聘Python工程师标准>>>

跟着张大神修炼内功

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

转载于:https://my.oschina.net/u/2367690/blog/2250473