我需要能够将图像和某些表单字段从客户端画布元素发送到PHP脚本,最终以$ _POST和$ _FILES结尾。当我这样发送时:
<script type="text/javascript"> var img = canvas.toDataURL("image/png"); ... ajax.setRequestHeader('Content-Type', "multipart/form-data; boundary=" + boundary_str); var request_body = boundary + '\n' + 'Content-Disposition: form-data; name="formfield"' + '\n' + '\n' + formfield + '\n' + '\n' + boundary + '\n' + 'Content-Disposition: form-data; name="async-upload"; filename="' + "ajax_test64_2.png" + '"' + '\n' + 'Content-Type: image/png' + '\n' + '\n' + img + '\n' + boundary; ajax.send(request_body); </script>
$ _POST和$ _FILES都重新填充,但是$ _FILES中的图像数据仍然需要像这样解码:
$loc = $_FILES['async-upload']['tmp_name']; $file = fopen($loc, 'rb'); $contents = fread($file, filesize($loc)); fclose($file); $filteredData=substr($contents, strpos($contents, ",")+1); $unencodedData=base64_decode($filteredData);
…以将其另存为可读的PNG。这不是一个选项,因为我试图将图像传递给Wordpress的media_handle_upload()函数,该函数需要指向指向可读图像的$ _FILES索引。我也无法相应地解码,保存和更改“ tmp_name”,因为它违反了安全性检查。
因此,我发现了这一点:http : //www.webtoolkit.info/javascript- base64.html, 并尝试在客户端进行解码:
img_split = img.split(",",2)[1]; img_decoded = Base64.decode( img_split );
但是由于某种原因,当我到达PHP时,我仍然没有得到可读的文件。所以问题是:“为什么?” 或“我在做什么错?” 或“这甚至有可能吗?” :-)
任何帮助非常感谢!
谢谢,凯恩
基于Nathan的出色回答,我能够对其进行定位,以便它仍通过jQuery.ajax进行。只需将其添加到ajax请求中即可:
xhr: function () { var myXHR = new XMLHttpRequest(); if (myXHR.sendAsBinary == undefined) { myXHR.legacySend = myXHR.send; myXHR.sendAsBinary = function (string) { var bytes = Array.prototype.map.call(string, function (c) { return c.charCodeAt(0) & 0xff; }); this.legacySend(new Uint8Array(bytes).buffer); }; } myXHR.send = myXHR.sendAsBinary; return myXHR; },
基本上,您只是返回一个被覆盖的xhr对象,因此“ send”表示“ sendAsBinary”。然后jQuery做正确的事情。