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


Trying to upload images without refreshing page with javascript, not working

我正在尝试通过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]);
}
}

看起来您的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();

希望这能回答你的问题。

相关文章: