FormData对象，似乎没有上传我的文件

FormData object, doesn't seem to be uploading my file...

本文关键字：我的 文件 对象 FormData      更新时间：2023-09-26

我遵循这个指南使用aJax上传图像，主要是为了有一个进度条。但是由于某些原因，PHP脚本似乎没有接收到文件!

这是我的JavaScript:

function submitFile() {
    var form = document.forms.namedItem("imageUpload");
    var formData = new FormData(form);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "php/uploadImage.php", true);
    xhr.onload = function(e) {
        if (xhr.status == 200) {
            console.log("uploaded!");
            doc("imageResponse").innerHTML = xhr.responseText;
        } else {
            console.log("error!");
            doc("imageResponse").innerHTML += "Error " + xhr.status + " occurred when trying to upload your file.<br '/>";
        }
    };
    //Progress
    /*
    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            var currentPercentage = Math.round(e.loaded / e.total * 100);
            document.getElementById("imageUpload").innerHTML = "UPLOAD IMAGE " + currentPercentage + "%";
            document.getElementById("imageUpload").style.backgroundSize = currentPercentage + "% 100%";
        }
    };
    */
    //Send data
    xhr.send(formData);
}

这里是我的PHP文件接收文件:

<?php
session_start();
print_r($_FILES);
?>

当前PHP文件返回一个空数组…它应该有我的档案!

Array ()

我设法修复了我的代码，这里是有相同问题的任何人的工作版本。我决定使用JavaScript创建一个新表单，并将文件字段值附加到这个新表单。

我这样做主要是为了我的情况。

function submitFile(file,buttonId) {
    //Generate a new form
    var f = document.createElement("form");
    f.setAttribute("method", "POST");
    f.setAttribute("enctype", "multipart/form-data");
    //Create FormData Object
    var formData = new FormData(f);
    //Append file
    formData.append("image", file.files[0], "image.jpg");
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "php/uploadImage.php", true);
    xhr.onload = function(e) {
        if (xhr.status == 200) {
            document.getElementById(buttonId).innerHTML = "UPLOAD COMPLETE";
            //console.log("uploaded!");
        } else {
            //console.log("error!");
            alert("Error " + xhr.status + " occurred when trying to upload your file");
        }
    };
    //Progress
    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            var currentPercentage = Math.round(e.loaded / e.total * 100)-1;
            document.getElementById(buttonId).innerHTML = "UPLOAD IMAGE " + currentPercentage + "%";
            document.getElementById(buttonId).style.backgroundSize = (currentPercentage+1) + "% 100%";
            if (currentPercentage==99) {
                document.getElementById(buttonId).innerHTML = "Processing image";
            }
        }
    };
    //Send data
    xhr.send(formData);
}
相关文章：