将文件选择器数据存储在隐藏的输入中

Question

为了个人方便，我正在使用一个名为 TamperMonkey 的工具来修改网页。 TamperMonkey 允许您通过在页面加载后将 JavaScript 附加到页面来修改客户端 HTML 等。

该网页有一个文件选择器，但它不允许您拖放文件。我经常使用这个网页，所以拖放功能真的很有帮助。

此页面有一个文件输入类型的表单。我一直在阅读，出于安全原因，无法修改文件输入类型。但是，使用 TamperMonkey，我可以将文件选择器的输入类型更改为“隐藏”，然后将隐藏的输入值设置为我放在网页上的文件内容，对吗？据我了解，服务器无法区分（如果name 属性相同）。

我不知道如何将隐藏输入类型设置为与文件选择器相同的数据：

我的文件在这里：const file = e.originalEvent.dataTransfer.files[0];

我通过这样做获得了隐藏的输入类型：const hiddenField = $("iframe").contents().find(".file-input").attr('type','hidden')

我只是不知道如何将file 设置为hiddenField。这个值应该是 base64 编码的吗？一个斑点？无论如何，什么代码可以正确设置数据？

它的包装形式如下：

<form ... method="post" enctype="multipart/form-data">

替代建议的重要上下文：在您单击按钮之前，此文件选择器输入根本不在页面上。然后它会显示在 iframe 中。

我正在使用火狐。

Answer 1

可以使用 Tampermonkey 修改文件输入类型。

如果您无法立即add drag and drop support to the input 本身，您可以使用另一个 dom 元素实现拖放，并如下使用它们。

const dT = new ClipboardEvent('').clipboardData || // Firefox < 62 workaround exploiting https://bugzilla.mozilla.org/show_bug.cgi?id=1422655
new DataTransfer(); // specs compliant (as of March 2018 only Chrome)

dT.items.add(new File([dataURItoBlob(image)], '1.jpg', { type: 'image/jpeg' }));
dT.items.add(new File([dataURItoBlob(image2)], '2.jpg', { type: 'image/jpeg' }));

// then ...
// $("iframe").contents().find(".file-input").get(0).files = dT.files;

That snippet of code 已经过测试，在类似的设置中，文件输入在单击按钮后动态附加到页面。使用不同的 div 将图像拖放到页面上。