Question

我正在使用网络标签工具从网站生成图片，但是我想修改这个功能，这样当我完成标签后，我不想将图片下载到本地，而是希望将其上传到服务器。该函数位于javascript文件中，与JS关联的所有上传都与提交表单有关。没有表单和超级全局，我应该如何将Web生成的图像上传到服务器？

这是我目前拥有的代码，它不在html文件中，而是在js文件中。

admin/writers

php文件

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);

非常感谢您的帮助，谢谢。

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自动设置。

在require.js模块中上传web生成的图像

1 个答案: