javascript - 如何通过 Chrome 扩展模拟文件拖放上传？

Question

我需要模拟用户将图像拖放到文件上传 div 上。我将从 aws s3 存储桶 中提取图像。

This question涵盖如何模拟事件。但是，drop 是通过调用 dropzone div 上的 .drop() 事件来完成的。

但是，就我而言，代码将在由 Chrome 扩展程序注入(inject)的内容脚本中运行。这意味着，据我所知，我无法在页面的 dropzone div 上调用 drop() 方法。

还有其他方法来模拟拖放功能吗？

如果重要的话，我正在处理的页面似乎正在使用 jQuery UI ddmanager 来控制其文件 dropzone div。

Answer 1

您可能想检查并尝试 Passing multiple files with drag and drop 中给出的现有拖放代码示例您实际上可以将一个或多个文件从桌面拖放到浏览器中。

<div id=”dropzone”></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
  var length = e.dataTransfer.files.length;
  for (var i = 0; i < length; i++) {
    var file = e.dataTransfer.files[i];
    ... // do whatever you want
  }
};

但是，它还指出，当您尝试传递文件夹时，请注意它将被拒绝或被视为 File 对象，从而导致失败。对于文件夹，您需要更改处理放置对象的方式。

您可能还想阅读Exploring the FileSystem APIs有关文件系统 API 以及新的拖放功能的更多信息，请阅读此 document .

最后，这些 GitHub 帖子也可能有帮助:

• drag_and_drop_helper.js
• jquery.simulate.js