如何使用 FormData 和 XmlHTTPRequest 上传文件？

Question

我正在尝试使用 FormData 将文件从网页发送到 php 脚本，但该文件未显示在 [=34= 的 $_FILES 变量中] 页。不确定我的错误是在 JS 方面还是 PHP 方面，或者我是否误解了有关该过程的更深层次的东西。

这是我的代码：

function uploadFile() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                console.log('success');
            } else {
                console.log('error');
            }
        }
    };
    xhr.open('POST','php/parsefile.php',true);
    xhr.setRequestHeader("Content-Type","multipart/form-data");
    var formData = new FormData();
    formData.append("myfile", document.querySelector('#fileInput').files[0]);
    xhr.send(formData);
}

<input type="file" id="fileInput">
<button onclick="uploadFile();">Upload</button>

这里是parsefile.php：

 <?php

 echo("Error: " . $_FILES["myfile"]['error'] . "\n");
 echo("Name: " . $_FILES['file']['name'] . "\n");

当我上传一个简单的小型（64 字节）文本文件时，控制台显示 success，但服务器的响应是这样的：

 Error: 
 Name:

我在这里错过了什么？感谢任何人可以提供的任何帮助。

Answer 1

我在您的代码中发现了两个问题：

在 JavaScript 代码中，您将“Content-Type”明确定义为“multipart/form-data”。当您发出 XHR 请求时，JS 会自动获取内容类型。
在您的 PHP 代码的第 4 行中，$_FILE 的键是“文件”。您需要将其更改为“我的文件”，才能使其正常工作。

您可以在下面查看我编辑的代码：

JS代码：

function uploadFile() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                console.log('success');
            } else {
                console.log('error');
            }
        }
    };
    xhr.open('POST','php/parsefile.php',true);
    var formData = new FormData();
    formData.append("myfile", document.querySelector('#fileInput').files[0]);
    xhr.send(formData);
}

PHP代码：

<?php
echo "Name: ". $_FILES['myfile']['name'];
echo "Error: ".$_FILES['myfile']['error'];

如何使用 FormData 和 XmlHTTPRequest 上传文件？

How do I upload a file using FormData and XmlHTTPRequest?

javascript

php

ajax

xmlhttprequest

form-data