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

Question

我有一个画布,并借助它从中检索图像数据canvas.toDataURL('image/png').

问题: <input type="file" />想要filepath 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);

UPDATE

如果您的服务器要求在提交的数据中包含参数"filename",则将该字符串包含为input元素的名称.

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

这将欺骗表单提交包含在其中的"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);

Answer 2

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