Question

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

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

但是，在我的情况下，代码将在Chrome扩展程序注入的content script中运行。这意味着，afaik，我无法在页面的dropzone drop()上调用div方法。

还有其他方法可以模拟drag-and-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以获取有关FileSystem API的更多信息以及有关新的拖放功能的信息，请阅读此document。

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

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

1 个答案: