输入类型=“文件”设置base64图像数据

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

Problem: <input type="file" />想要文件路径为value而不是 Base64 数据。

问题： 如何借助以下命令将 Base64 图像数据发送到服务器<input type="file" />不将它们保存到本地文件系统？

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

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

只需在表单中创建一个隐藏的输入元素即可。 （注意type)

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

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

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

UPDATE

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