使用 multipart/form-data 的 Ajax 发布 dataURL答案

【问题标题】：Ajax Post dataURL using multipart/form-data使用 multipart/form-data 的 Ajax 发布 dataURL
【发布时间】：2014-11-11 21:37:14
【问题描述】：

我正在编写一个程序，它从画布元素中提取 dataURL 并将其发送到服务器端以转换回 jpg 并保存。我现在需要做的是以编程方式从服务器获取此图像并使用另一个 ajax 函数将其作为多部分/表单数据编码形式发布。部分代码无法修改，期待此类帖子。

具体来说：如何从服务器获取图像并将其放入 enctype="multipart/form-data" 的 POST 中，以便接收请求的代码将其视为来自常规形式。所有这些都使用 Jquery 或 JavaScript Ajax。

额外信息：发布到的代码是 ASP 经典。我正在使用 PHP 来转换 DataURL。 PHP 代码：

//Get the base-64 string from data
$data=$_POST['img_val'];

list($type, $data) = explode(';', $data);
list(, $data)      = explode(',', $data);
$data = base64_decode($data);

file_put_contents('filename.png', $data);

$images_orig = imagecreatefrompng('filename.png');
$photoX = ImagesX($images_orig);
$photoY = ImagesY($images_orig);
$images_fin = ImageCreateTrueColor(650, 650);
ImageCopyResampled($images_fin, $images_orig, 0, 0, 0, 0, 650+1, 650+1, $photoX, $photoY);
imagejpeg($images_fin, NULL, 100);

ImageDestroy($images_orig);
ImageDestroy($images_fin);

上述代码可用于返回二进制图像文件或将内容保存到磁盘并返回图像 URL。我不确定哪个对我的最终目标更有用。

谢谢大家。

【问题讨论】：

如果手动将$data 设置为base64 字符串会怎样？脚本的其余部分是否按预期执行？试图确定您的问题是什么 - 如果它只是从帖子中获取数据。
看看这个答案stackoverflow.com/a/19067866/1353011。它从服务器获取一个文件并将其作为多部分/表单数据发送。

标签： javascript php jquery ajax forms

【解决方案1】：

因此，对于那些需要解决此类问题的人来说，答案有点复杂。上面的 PHP 代码确实将图像从 dataURL 正确转换为 png，然后将其调整为 jpg。从 ajax 制作 multipart/form-data Post 的正确方法如下：

var url = "example.php"
var image_as_blob = previousAjaxRequest(); //use xhr.responseType = "blob" and a GET request to grab server image 
var form = new FormData();
form.append('image_variable_name', image_as_blob, 'file_name.extension'); //the third argument seemed to make all the difference in server code seeing the file correctly.
$.ajax({
    url: url,
    type: 'post',
    data: form,
    cache: false,
    contentType: false, //required for multipart
    processData: false  //required for multipart
}).done(function( data ) {
    //do what you want with returned data
});

【讨论】：

previousAjaxRequest() 在哪里？