dt4233
dt4233
2015-09-07 15:12

FormData对象,似​​乎没有上传我的文件...

已采纳

Im following this guide to use aJax to upload an image, mainly so I can have a progress bar. But for some reason the PHP script doesn't seem to receive a file!

Here is my 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);
}

And here is my PHP file which receives the file:

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

Currently that PHP file is returning an empty Array... it should have my file!

Array ( )

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • drryyiuib43562604 drryyiuib43562604 6年前

    I managed to fix my code, here is the working version for anyone with the same problem. I decided to make a new form using JavaScript and append the file field value to this new form.

    I did this mainly for my situation.

    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);
    }
    
    点赞 评论 复制链接分享