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

Posted 2023-05-08

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

【英文标题】：Storing file chooser data in a hidden input

【发布时间】：2021-01-17 11:37:22

【问题描述】：

为了个人方便，我正在使用一个名为 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 中。

我正在使用火狐。

【问题讨论】：

你能分享更多代码吗？甚至是网站的网址？

@Goldwave 我无法共享该网站。如果您告诉我您还需要什么，我可以分享代码。

您是否尝试将文件拖到选择按钮上？ “选择要上传的文件”按钮。还是没有这种东西？

@Goldwave 它不起作用。选择按钮在弹出窗口中，我必须在它出现之前单击一些东西。

一些想法。 1）在 document.body 上的 dragover 事件中，更改现有文件输入的样式，使其覆盖整个页面，例如添加一个巨大的透明边框并使用绝对定位 + z-index 2) 替换页面的提交事件并使用 FormData API 自己构建有效负载，该 API 可以直接使用文件 blob，您将从 drop 中的文件内容中读取该文件 blob事件处理程序。

【参考方案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 将图像拖放到页面上。

【讨论】：

我已经有了文件：const file = e.originalEvent.dataTransfer.files[0]; 我将尝试使用你答案的最后一行。

最好链接到 where 你选择一半的代码...