問題描述

我需要能夠將圖像和一些表單字段從客戶端畫布元素發送到 PHP 腳本，以 $_POST 和 $_FILES 結尾.當我這樣發送時:

I need to be able to send an image and some form fields from a client side canvas element to a PHP script, ending up in $_POST and $_FILES. When I send it like this:

<script type="text/javascript">
var img = canvas.toDataURL("image/png");
...
ajax.setRequestHeader('Content-Type', "multipart/form-data; boundary=" + boundary_str);
var request_body = boundary + '
' 
+ 'Content-Disposition: form-data; name="formfield"' + '
' 
+ '
' 
+ formfield + '
' 
+ '
' 
+ boundary + '
'
+ 'Content-Disposition: form-data; name="async-upload"; filename="' 
+ "ajax_test64_2.png" + '"' + '
' 
+ 'Content-Type: image/png' + '
' 
+ '
' 
+ img
+ '
' 
+ boundary;
ajax.send(request_body);
</script>

$_POST 和 $_FILES 都返回填充，但 $_FILES 中的圖像數據仍然需要像這樣解碼:

$_POST and $_FILES both come back populated, but the image data in $_FILES still needs decoding like this:

$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"，因為它違反了安全檢查.

...in order to save it as a readable PNG. This isn't an option as I'm trying to pass the image to Wordpress's media_handle_upload() function, which requires an index to $_FILES pointing to a readable image. I also can't decode, save and alter 'tmp_name' accordingly, as it falls foul of security checks.

所以，我發現了這個:http://www.webtoolkit.info/javascript-base64.html并嘗試在客戶端進行解碼:

So, I found this: http://www.webtoolkit.info/javascript-base64.html and tried to do the decode on the client side:

img_split = img.split(",",2)[1];
img_decoded = Base64.decode( img_split );

但由于某種原因，當它到達 PHP 時，我仍然沒有得到一個可讀的文件.所以問題是:為什么?"或我做錯了什么?"或者這可能嗎?":-)

but for some reason I still don't end up with a readable file when it gets to the PHP. So the question is: "Why?" or "What am I doing wrong?" or "Is this even possible?" :-)

非常感謝任何幫助！

謝謝，凱恩

推薦答案

以 Nathan 的出色回答為基礎，我能夠完善它，以便它仍然通過 jQuery.ajax.只需將其添加到 ajax 請求中:

Building on Nathan's excellent answer, I was able to finnagle it so that it is still going through jQuery.ajax. Just add this to the ajax request:

            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 做正確的事.

Basically, you just return back an xhr object that is overriden so that "send" means "sendAsBinary". Then jQuery does the right thing.

這篇關于使用 Ajax 和 PHP $_FILES 從 Canvas 元素發送圖像的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！