JS上传文件到HTML文件元素，保留常规点击的效果

Question

如何使用javascript将图像上传到特定的HTML文件元素(例如，images.google.com上的dropzone)?

我已经试过了

fileElement.files = [myFile];

但这只是将我的文件上传到特定的HTML文件元素，而不会触发上传到该文件元素的正常效果(例如，触发对图像的实际google搜索)。

Answer 1

每个网站都需要不同的微调，但基本原理可能是相同的:

你找到他们期望拖动事件发生的元素，你构建一个DataTransfer实例，并在其中添加你的文件，你触发他们期望的各种事件。

对于https://images.google.com/，当前的值是

// a 300x150px transparent Image file, you will provide yours
const blob = await new Promise((res) => document.createElement("canvas").toBlob(res));
const file = new File([blob], "myfile.png");
const dT = new DataTransfer();
dT.items.add(file);
// Google Image expects a dragenter event first
const dragenter = new DragEvent("dragenter", {dataTransfer: dT, bubbles: true});
document.dispatchEvent(dragenter);
// let the DOM update (they do apparently not do it synchronously)
setTimeout(() => {
const drop = new DragEvent("drop", {dataTransfer: dT, bubbles: true});
document.querySelector(".bdmI4").dispatchEvent(drop);
});