带有 FormData 的 JQuery ajax POST 不发送任何值答案

【问题标题】：JQuery ajax POST with FormData doesn't send any values带有 FormData 的 JQuery ajax POST 不发送任何值
【发布时间】：2017-11-06 14:13:33
【问题描述】：

似乎有很多关于此的帖子，但在其中找不到解决方案，我遇到了难题。帮助，亲爱的堆垛机！

我正在编写一些代码，让用户可以选择个人资料图片，对其进行裁剪，然后将裁剪后的图像保存在服务器上。我正在使用 Cropper.js 库来处理实际的裁剪并确定它正在工作，因为我可以使用以下代码实时显示裁剪：

var imageData = cropper.getCroppedCanvas().toDataURL();
var profileimage = document.getElementById('myProfilePhoto');
profileimage.src = imageData;

现在我想将裁剪后的图像发送到服务器，最好的方法似乎是创建一个 blob 和 Ajax，然后将其交给一个 php 脚本来处理它。

cropper.getCroppedCanvas().toBlob(function (blob) {
    var formData = new FormData();
    formData.append('file', blob);
    formData.append('uuid', '{a unique identifier}');
    $.ajax({
         type:           'POST',
         url:            '{the php script}',
         data:           formData,
         processData:    false,
         contentType:    false,
         success: function (response) {
             console.log('Upload success: '+response);
         },
         error: function () {
             console.log('Upload error');
         }
    });
});

在这个阶段，我只是将我的 php 脚本放到 var_dump($_REQUEST) 中，这样我就可以在控制台中看到脚本认为它得到了什么。但是，响应只是发回默认的 $_REQUEST 对象，如 PHPSESSID，没有文件或 uuid 输入。

我做错了什么？

提前感谢您的任何指点。

【问题讨论】：

你在哪里定义blob？ uuid 是否在您的 PHP 代码中被正确检索？
blob 是回调参数。在发送请求之前，javascript 端的控制台中没有任何错误吗？如果画布被非 CORS 绘图污染，toDataURL 或 toBlob 函数会抛出错误。请参阅CORS anabled image 了解更多信息
如果 value 是 Blob 对象而不是 File 对象，则将 value 设置为新的 File 对象，表示相同的字节，其 name 属性值为“blob”。
抱歉，我错过了您在回调中运行第二个 sn-p 的事实。
所以当您执行console.log(blob) 时，您会看到blob 吗？当你查看网络请求时，你看到了吗？

标签： javascript jquery ajax form-data cropperjs

【解决方案1】：

如果您通过邮寄方式发送以查看请求，请输入此代码

 var formData = new FormData();
formData.append('file', blob);
formData.append('uuid', '{a unique identifier}');
formData.append('_method', 'PATCH'); <---add this and you're good to go

【讨论】：

我兴奋地尝试了这个，认为有一个很好的简单解决方案，但遗憾的是仍然没有得到 php 端的文件或文本字段。
@PeteSE4，你把它放在你的 html 表单中了吗 -->enctype="multipart/form-data
也在 chrome 中打开 firebug 或开发者控制台导航到网络标签
jeez - 我没有 HTML 表单。这是通过ajax创建表单变量并直接发布；不涉及 HTML 表单。另外，据我了解，使用 FormData() 时， contentType 需要为 false （我也尝试将其作为 multipart.form-data ，但没有成功）。
好的 - 奇怪的更新。我尝试做一些非常普通的测试以确保 ajax 本身正常工作。如果我尝试 $.ajax({ type: "POST", url, data{test:"TEST"} });然后在 PHP 端没有输入。将其更改为 $.ajax({ type: "GET", url, data{test:"TEST"} });并且 PHP 看到了“测试”字段。所以我的结论是，blob 和 FormData 都是红鲱鱼，通过 Ajax 发布只是有些问题。有什么想法吗？

【解决方案2】：

所以答案很简单，但很难找到。

我的服务器有一个 .htaccess 重写规则，它会自动更改 www。地址指向非 www 版本，显然我已经愚蠢到包含 www。在我调用的 URL 中，似乎在这些情况下剥离 $_POST 数据就足够了。

所以 FormData() 和 blob 在这里都是红鲱鱼 - 这只是一个重定向这就是原因。

【讨论】：