我如何通过Chrome扩展模拟文件拖放上传

How do I simulate a file drag-n-drop upload via Chrome Extension?

本文关键字：文件 拖放 模拟 扩展 何通过 Chrome      更新时间：2023-09-26

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

这个问题涉及如何模拟事件。然而，drop是通过调用dropzone div上的.drop()事件来完成的。

然而，在我的情况下，代码将运行在content script注入的Chrome扩展。这意味着，我不能在页面的dropzone div上调用drop()方法。

是否有另一种方法来模拟drag-and-drop函数?

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

您可能想要检查并尝试现有的拖放代码示例传递多个文件与拖放，其中您可以实际拖放一个或多个文件从桌面到浏览器。

<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对象，从而导致失败。对于文件夹，您需要更改处理掉落对象的方式。

您可能还想阅读探索文件系统API以获得更多关于文件系统API和新拖放功能的信息，请阅读此文档。

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

  • drag_and_drop_helper.js
  • jquery.simulate.js
相关文章：