尝试在不使用 javascript 刷新页面的情况下上传图像，无法正常工作

Question

我正在尝试通过 html 表单将图像上传到我的服务器而不刷新页面。我的问题是文件没有上传，我不知道为什么。

Javascript 代码：

function uploadFiles(event) {
var fileSelect = document.getElementById('file');
var files = fileSelect.files;
var formData = new FormData();

for (var i = 0; i < files.length; i++) {
    var file = files[i];
    if (!file.type.match('image.*')) {
        alert("File: " + file.name + " is not an image and will not be uploaded.");
        continue;
    }
    formData.append('images[]', file, file.name);
}

var xhr = new XMLHttpRequest();
xhr.open('POST', '../htdocs/Php/upload_file.php', true);
xhr.onload = function () {
  if (xhr.status === 200) {
    // File(s) uploaded.
      alert('files uploaded');
  } else {
    alert('An error occurred!');
  }
};
xhr.send(formData);
}

HTML 代码：

<form action="../htdocs/Php/upload_file.php"  method="post" enctype="multipart/form-data">
     <input type="file" name="images[]" id="file" onchange="uploadFiles()"  multiple required />
</form>

PHP 代码：

$numberOfFiles = count($_FILES['images']['name']);

for($id = 0; $id < $numberOfFiles; $id++)
{
if (!file_exists("../UploadedImages/" . $_FILES["images"]["name"][$id])) {
    move_uploaded_file($_FILES["images"]["name"][$id], "../UploadedImages/" . $_FILES["images"]["name"][$id]);
}
}

Answer 1

看起来您的 JavaScript 是正确的，但您的 PHP 需要注意。我修改了您的 php，以便它首先检查是否通过了 $_FILES。然后，您的 !file_exists() 语句中存在一些不正确的逻辑，以及您如何移动和检查文件名。

要检查文件是否存在，和要移动文件，您需要使用 $_FILES['images']['tmp_name']。 'name' 属性只是上传文件的名称，而不是上传到浏览器的物理文件。

要真正测试您的代码，请使用 firebug 并查看控制台。它应该返回一行，您可以展开并查看发布的内容和返回的内容。

这是一个例子，我给你的以下代码返回了这个：

C:\filepath\binaries\tmp\phpDB53.tmp Was Succesuflly uploaded 
C:\filepath\binaries\tmp\phpDB54.tmp Was Succesuflly uploaded 
C:\filepath\binaries\tmp\phpDB55.tmp Was Succesuflly uploaded 
C:\filepath\binaries\tmp\phpDB56.tmp Was Succesuflly uploaded 

注意：仔细检查文件路径是否绝对正确。在检查 firebug 控制台时，php 文件也会返回文件错误，因为您有 php 错误报告。

//Check if files were passed through to your ajax page
if(isset($_FILES)) {

    $numberOfFiles = count($_FILES['images']['name']);

        for($id = 0; $id < $numberOfFiles; $id++)
        {
            if (file_exists($_FILES["images"]["tmp_name"][$id])) {
                move_uploaded_file($_FILES["images"]["tmp_name"][$id], $_FILES["images"]["name"][$id]);
                echo $_FILES["images"]["tmp_name"][$id] . " Was Succesuflly uploaded \r\n ";
            } else {
                echo "file didnt exists " . $_FILES["images"]["tmp_name"][$id] . "\r\n ";
            }


        }

} else {

    //No Files were passed through
    echo "no files passed through";

}

exit();

希望能回答你的问题。