Javascript XMLHttpRequest（）未发送FormData（），导致PHP$\u文件数组为空且未上载任何文件

我想做什么：

实际上，我试图将一个文件上传到服务器上的一个目录，用户通过HTML

元素上传该目录

为此，我在

元素的

change

事件上创建了一个新的

XMLHttpRequest

，它将上传文件的数据发送到

upload.php

文件，然后该文件将处理上传的文件并异步上传到服务器

我的代码：

HTML

PHP（upload.PHP）

我的问题

这段代码根本不起作用。打印

$\u文件

数组会返回一个空数组，控制台记录

xhr.response

会记录PHP中设置的错误消息（“某个地方发生了错误。请重试或与管理员联系”）。我真的非常感谢任何关于解决这个问题的帮助，因为我已经浏览了无数关于这个问题的其他在线资源，尽管我觉得我的代码完全按照他们说的去做，但仍然不起作用

我所尝试的：

---

我尝试简单地提交表单，而不是尝试使用

FormData（）

对象和

更改事件提交表单，方法是添加一个提交按钮，尽管页面重定向到…url/upload.php并且无法异步工作，

$\u FILES

数组包含上载文件的正确数据，并且该文件已上载到服务器，这使我认为我的Javascript代码中一定存在问题，可能与

XMLHttpRequest

或

FormData

对象有关。

通常，XMLHttpRequest将从FormData对象生成适当的内容类型

但是，您正在使用手动创建的文件覆盖它：

但是，缺少必需的

boundary

属性，因此PHP无法找到将请求的各个部分拆分的点

---

不要覆盖内容类型。删除带引号的行。

此问题是在

IE

或任何其他浏览器中出现的吗？您可以在不使用setRequestHeader行的情况下尝试此操作吗？下面的示例也不需要手动指定内容类型。@Andreilupulesa我正在使用Chrome，但我假设browser@04FS哇，这样就修好了。。。我遇到的每一个例子都明确指出，行是必要的，但删除它会使它工作。。。很奇怪，但是非常感谢你！请随意把它写下来作为一个答案，我会接受它，如果没有，我可以为您写下答案：）然后您应该在开发工具中查看您的文件是否确实被发送。

<form class="js-upload-form" method="POST" action="upload.php" enctype="multipart/form-data">
    <input class="button js-uploaded-file" type="file" name="file" />
</form>

document.querySelector('.js-uploaded-file').addEventListener('change', function() {

    let file = this.files[0];
    let formData = new FormData();

    formData.append('file', file);

    let xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload.php', true);

    xhr.setRequestHeader('Content-type', 'multipart/form-data');

    xhr.upload.onprogress = function(e) {

        if (e.lengthComputable) {

            let percentComplete = (e.loaded / e.total) * 100;
            console.log(percentComplete + '% uploaded');

        }
    };

    xhr.onload = function() {

        if (this.status == 200) {

            console.info(this.response);

        }
    };

    xhr.send(formData);

}, false);

print_r($_FILES);

$currentDir = getcwd();
$uploadDirectory = "/uploads/";

$errors = []; // Store all foreseen and unforseen errors here

$fileName = preg_replace("/[^A-Z0-9._-]/i", "_", $_FILES['file']['name']);
$fileSize = $_FILES['file']['size'];
$fileTmpName = $_FILES['file']['tmp_name'];
$fileType = $_FILES['file']['type'];

$uploadPath = $currentDir . $uploadDirectory . $fileName;

if ($fileSize > 2000000) {
    $errors[] = "This file is more than 2MB. Sorry, it has to be less than or equal to 2MB";
}

if (empty($errors)) {
    $didUpload = move_uploaded_file($fileTmpName, $uploadPath);

    if ($didUpload) {
        echo "The file " . basename($fileName) . " has been uploaded";
    } else {
        echo "An error occurred somewhere. Try again or contact the admin";
    }
} else {
    foreach ($errors as $error) {
        echo $error . "These are the errors" . "\n";
    }
}

xhr.setRequestHeader('Content-type', 'multipart/form-data');