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

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 中。

我正在使用 firefox。

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;

在类似的设置中进行了工作测试，在该设置中，单击按钮后文件输入动态附加到页面。使用不同的 div.

将图像拖放到页面上

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

Storing file chooser data in a hidden input

html

javascript

firefox

jquery

tampermonkey