javascript - 输入类型 ="file"设置base64图像数据

Question

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

问题: <input type="file" />希望文件路径为 value而不是 base64 数据。

问题: 如何借助 <input type="file" /> 将 base64 图像数据发送到服务器没有将它们保存到本地文件系统？

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

也许可以使用 XmlHttpRequest 来克服这个问题？

Answer 1

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

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

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

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

更新

如果您的服务器要求在提交的数据中包含参数“filename”，则将该字符串作为 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);