Question

我有一个画布，并借助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);

更新

如果您的服务器要求使用参数＆＃34; filename＆＃34;在提交的数据中，然后将该字符串包含为input元素的名称。

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

这会欺骗表单使用＆＃34; filename＆＃34;提交您的数据。参数包含在其中。

如果您想使用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

输入类型=＆＃34;文件＆＃34;设置base64图像数据

2 个答案: