input type="file" 设置base64图片数据答案

【问题标题】：Input type="file" set base64 image datainput type="file" 设置base64图片数据
【发布时间】：2026-01-31 23:05:02
【问题描述】：

我有一个画布并在canvas.toDataURL('image/png') 的帮助下从中检索图像数据。

问题： <input type="file" /> 想要文件路径为 value 而不是 base64 数据。

问题： 如何在<input type="file" />的帮助下将base64图像数据发送到服务器而不将它们保存到本地文件系统？

我的解决方法：尝试隐藏输入<input type="file" />，但服务器需要文件名属性

也许用 XmlHttpRequest 可以解决这个问题？

【问题讨论】：

为什么需要将base64图像转换为文件输入？您可以简单地将base64字符串发送到服务器，然后将其转换为图像服务器端。
@YeldarKurmangaliyev 服务器是第三方，我无法更改它的 API。
哦，我明白了。我想，这篇文章可以帮到你：*.com/questions/4998908/…
@YeldarKurmangaliyev 谢谢！会玩它
@YeldarKurmangaliyev 有帮助！万分感谢！！！！你可以创建你的答案，我会接受它

标签： javascript html ajax html5-canvas

【解决方案1】：

只需在表单中创建一个隐藏的输入元素。（注意类型）

<input type="hidden" name="myHiddenField">

在提交之前将您的数据附加到元素的值。

var imageData = canvas.toDataURL('image/png');
document.getElementsByName("myHiddenField")[0].setAttribute("value", imageData);

更新

如果您的服务器要求在提交的数据中包含参数“文件名”，则将该字符串作为input 元素的名称包含在内。

<input type="hidden" name="filename"/>

这将欺骗表单提交包含“文件名”参数的数据。

如果您想为此使用XMLHttpRequest，以下是一个示例：

//Prepare data to be sent
var imageData = canvas.toDataURL('image/png');
var params = "filename=" + imageData;

//Initiate the request
var httpRequest = new XMLHttpRequest();            
httpRequest.open('POST', 'test.php', true);

//Send proper headers
httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
httpRequest.setRequestHeader("Content-length", params.length);
httpRequest.setRequestHeader("Connection", "close");

//Send your data
httpRequest.send(params);

【讨论】：

不幸的是，这不起作用，因为服务器需要 filename 参数。见*.com/questions/33297565/…
诀窍是您可以在输入元素中使用 name="filename"。我已经用这个和 XMLHttpRequest 方法更新了我的答案。
在输入标签中使用 name="filename" 比创建一个全新的对象来代替单个元素要容易得多。无论如何 - 你喜欢它的方式。 :)
如果你的服务器向<input type="hidden" name="filename">返回了错误的请求，那么你在其他地方有问题。
我遇到了问题，因为我的base64大于512kb所以我得到了图像剪切（我的base64大约是640kb），我该怎么办？

【解决方案2】：

您可以使用 FileReader，在此处查看示例：https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

【讨论】：

我的图片在本地不存在，只存在于内存中。行得通吗？
我明白了，那么你可以使用 XHR (XMLHttpRequest) 将 dataUrl 发送到服务器