javascript - $_FILES 全局变量无法接收从 XMLHttpRequest() 发送的数据

Question

我正在尝试使用 XMLHttpRequest() 和 PHP 将文件上传到服务器中的文件夹。 这是 HTML 文件 fu2.html:

<form action="fu2.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" id="file"><br><br>
    <input type="button" value="Upload" onclick="loadFile()">
</form>
<script>
function loadFile() {

    var myFileList = document.getElementById("file").files;
    var fileToUpload = myFileList[0];
    alert(fileToUpload.name+","+fileToUpload.tmp_name);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", 'http://10.192.44.143/pgadmsn/fu2.php',false);
    xhr.send(fileToUpload);
    alert(xhr.responseText);
}
</script>

php 文件 fu2.php 是:

<?php
if(isset($_FILES["fileToUpload"])){
$name = $_FILES["fileToUpload"]["name"];
$tmp_name = $_FILES['fileToUpload']['tmp_name'];

if (isset ($name)) {
    if (!empty($name)) {

    $location = 'uploads/';

    if  (move_uploaded_file($tmp_name, $location.$name)){
        echo 'Uploaded';    
        }

        } else {
          echo 'please choose a file';
          }
    }
    else{
        echo "name not set";
    }
}
else echo "FILES not set!";
?>

我面临两个问题:

1. 在 alert(fileToUpload.name+","+fileToUpload.tmp_name); 中，fileToUpload.tmp_name 将变为未定义。

2. 主要问题是在 fu2.php 文件中 isset($_FILES["fileToUpload"]) 的计算结果为 false 因为我得到 文件未设置!为xhr.responseText。

我在这里做错了什么？

Answer 1

这里是缺陷:

1).您引用了一个不存在的组件名称。这是$_FILES["file"]而不是$_FILES["fileToUpload"]

2).基本上，您通过 Ajax 将二进制数据传输到服务器，您需要将文件包装到可读流中的机制，可以使用 FormData 来实现对象。

在这里我修复了您的代码:

fu.html

<form action="fu2.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" id="file"><br><br>
    <input type="button" value="Upload" onclick="loadFile()">
</form>
<script>
    function loadFile() {

        var myFileList = document.getElementById("file").files;
        var fileToUpload = myFileList[0];

        var fd = new FormData();
        fd.append("file", fileToUpload);
        alert(fileToUpload.name);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", 'http://10.192.44.143/pgadmsn/fu2.php',false);
        xhr.send(fd);
        alert(xhr.responseText);
    }
</script>

fu.php

<?php
if(isset($_FILES["file"])){
    $name = $_FILES["file"]["name"];
    $tmp_name = $_FILES['file']['tmp_name'];

    if (isset ($name)) {
        if (!empty($name)) {

            $location = 'uploads/';

            if  (move_uploaded_file($tmp_name, $location.$name)){
                echo 'Uploaded';
            }

        } else {
            echo 'please choose a file';
        }
    }
    else{
        echo "name not set";
    }
}
else echo "FILES not set!";
?>