在require.js模塊中上傳web生成的圖像

Question

我正在使用web標記工具從網站生成圖像，但是我想修改該功能，以便當我完成標記時，而不是將圖像下載到本地，我希望它被上傳到服務器。該函數在JavaScript文件中，並且與JS相關的所有上傳都與提交表單有關。沒有形式和超全局的，我怎麼上傳一個網頁生成的圖像到服務器？

這裏是我現在有的代碼，它不在html文件中，它在js文件中。

var file_data = annotator.export(); 
var formData = dataURItoBlob(file_data); 
var fd = new FormData(document); 
fd.append("resultImage",formData); 
url="upload/"; 
http.open("POST", url, true); 

// headers 
http.setRequestHeader("Content-type", "application/x-www-form-  urlencoded"); 
http.setRequestHeader("Content-length", fd.length); 
http.setRequestHeader("Connection", "close"); 

http.onreadystatechange = function() { 
if(http.readyState == 4 && http.status == 200) { 
    alert(http.responseText); 
} 
} 

http.send(fd); 

php文件

<?php 
$upload_dir = "upload/"; 
$img = $_POST['hidden_data']; 
$img = str_replace('data:image/png;base64,', '', $img); 
$img = str_replace(' ', '+', $img); 
$data = base64_decode($img); 
$file = $upload_dir . mktime() . ".png"; 
$success = file_put_contents($file, $data); 
print $success ? $file : 'Unable to save the file.'; 
?> 

非常感謝您的幫助，謝謝。

Answer 1

dataURItoBlob(file_data);通過函數的名稱，它看起來像將要返回一個blob對象。上傳到php腳本時的blob/file對象將在全局中爲$_FILES，而不是$_POST。你會使用move_uploaded_file將它移動到你想要的目的地。

另外你似乎正在使用錯誤的索引。您在您的php中使用了hidden_data，但您在JavaScript中將名稱設置爲resultImage。您需要在php中使用與您在javascript中相同的名稱。

所以你的PHP代碼應該是這個樣子

$upload_dir = "upload/"; 
$img = $_FILES['resultImage']; 
if($img["error"] == UPLOAD_ERR_OK){ 
    //should do other sanitation like making sure the file 
    //that is uploaded is the actual type of file you expect 
    $path = $upload_dir . mktime() . ".png"; 
    move_uploaded_file($img["tmp_name"], $path); 
} 

作爲一個側面說明，使用和FORMDATA對象，你並不需要設置請求頭狀Content-Type，因爲它們會自動通過API進行設置時。