我有一个画布,并借助于 canvas.toDataURL('image / png')从中检索图像数据。
问题: < input type =file/> 希望filepath为 code>代替base64数据。
问题: 如何在< input type =file/> 无需将它们保存到本地文件系统中? strong>我的解决方法:尝试隐藏输入< input type =file/> ,但服务器需要文件名属性
也许可以用XmlHttpRequest来解决这个问题吗? 您的表单中隐藏的输入元素。 (注意 type )
< input type =hiddenname =myHiddenField> ;在提交前将数据附加到元素的值。
var imageData = canvas.toDataURL('image / png'); document.getElementsByName(myHiddenField)[0] .setAttribute(value,imageData);更新
如果您的服务器要求在提交的数据中使用参数filename,然后将该字符串作为 input 元素的名称。
< input type =hiddenname =文件名/>这将欺骗表单提交包含在其中的filename参数的数据。 p>
如果您想为此使用 XMLHttpRequest ,下面是一个示例:
//准备要发送的数据 var imageData = canvas.toDataURL('image / png'); var params =文件名=+ imageData; //发起请求 var httpRequest = new XMLHttpRequest(); httpRequest.open('POST','test.php',true); //发送适当的头文件 httpRequest.setRequestHeader(Content-type,application / x-www-form-urlencoded); httpRequest.setRequestHeader(Content-length,params.length); httpRequest.setRequestHeader(Connection,close); //发送你的数据 httpRequest.send(params);
I have a canvas and retrieve image data from it with help of canvas.toDataURL('image/png').
Problem: <input type="file" /> wants filepath as value instead of base64 data.
Question: How to send base64 image data to server with help of <input type="file" /> WITHOUT saving them to local file system?
My workarounds: Tried hidden input <input type="file" />, but server requires filename property
Maybe that's possible to overcome this with XmlHttpRequest?
解决方案Just create a hidden input element in your form. (notice the type)
<input type="hidden" name="myHiddenField">Attach your data to the value of the element before submitting.
var imageData = canvas.toDataURL('image/png'); document.getElementsByName("myHiddenField")[0].setAttribute("value", imageData);UPDATE
If your server demands to have the parameter "filename" in the submitted data, then include that string as the name of the input element.
<input type="hidden" name="filename"/>This will trick the form to submit your data with the "filename" parameter included in it.
If you want to use XMLHttpRequest for this, following is a sample:
//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);
更多推荐
输入类型=“文件”设置base64图像数据
发布评论