Ajax JS/PHP 图片上传器不工作

Question

我尝试了多种方法并遵循了 StkOvfl 和 W3 规范中的很多问题，但仍然不知道。

我有一个表单输入：

<input type="file" multiple accept="image/*" id="item-image-upload" >

然后在我的Javascript（prepareFormData方法）中：[See full gist class here]:

    var files = this.getFiles();
    var formData = new FormData();

    for (var i = 0; i < files.length; i++) {

        var file = files[i];

        if (!file.type.match('image.*')) {
            continue;
        }

        formData.append(this.uploadEntityName, file);
    }

当我 console.log(files), 时，我得到所有文件都很好。但是，formData 不工作。我还尝试添加一个任意项目：

    formData.append("Apple", 1);

我收到的回复是空的。服务器确实在 php 中安息为：

public function uploadImage(){
    return json_encode(array_merge($_REQUEST, $_FILES));
}

Answer 1

现在我 99% 确定这是你的 header，如果你查看日志或打开 PHP 警告，你会看到 Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0

我从 MDN 复制了这个（并添加了你的 header 行并删除了输入文件）和运行它在我的开发箱上的一个脚本上，该脚本设置为 shout all错误，我得到了那个错误，然后是一个空数组

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456"

// JavaScript file-like object
var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
var blob = new Blob([content], { type: "text/xml"});

formData.append("somefiles[]", blob);

var request = new XMLHttpRequest();
request.open("POST", "MYDEVBOX/testpost.php");
// remove the line below and it works
request.setRequestHeader("Content-Type", "multipart/form-data");
request.responseType = "json";
request.send(formData);

几分钟后决定调查原因后返回。它与 multi-part 数据的边界有关。当您执行 xhr.send(formData) 时（或沿途的某个地方），XHR 会自动设置 header 与匹配边界。当您设置 header 时，请求会使用它来代替边界，并且 PHP 不知道在哪里拆分输入。这是一个快速的屏幕截图，可以更好地指出它。

Ajax JS/PHP 图片上传器不工作

Ajax JS/PHP Image Uploader not working

javascript

php

ajax

form-data