無法將$ _FILES發送到php腳本

Question

我正在嘗試使用最基本的方法制作一個像圖片上傳器一樣的Facebook。 我在輸入中選擇了多個圖像，然后它創建了每個文件的進度條，並帶有名稱。 它顯示正在加載，但未發送到upload.php文件。 我有HTML代碼部分：

<div class="container">
    <h1>Uploader</h1>
    <hr>
    <form action="#" id="image_form">
        <input type="file" id='image' name="image" multiple>
    </form>
    <div class="container">
        <div class="filelist">
    </div>
    <ul id="uploads">
    </ul>
</div>

然后我有我的JavaScript。 使用文件名創建進度條，並跟蹤進度。 我已經嘗試過使用大型文件，並且上傳確實需要很長時間。 進度條可以准確顯示此內容。

$('#image').change(function (event) {
    var files = this.files;

    // iterate over each file to upload, send a request, and attach progress event
    for (var i = 0, file; file = files[i]; i++) {
        var li = $("<li>" + file.name + "<div class='progress progress-striped active'><div class='progress-bar' style='width:0%'>" + file.size + "</div></div></li>");

        // add the LI to the list of uploading files
        $("#uploads").append(li);

        // fade in the LI instead of just showing it
        li.hide().fadeIn();

        var xhr = new XMLHttpRequest();
        xhr.upload.li = li;
        xhr.upload.addEventListener('progress', function(e) {
            var percent = parseInt(e.loaded / e.total * 100);
            this.li.find(".progress-bar").width(percent+'%');
        }, false);

        // setup and send the file
        xhr.open('POST', 'upload.php', true);
        xhr.setRequestHeader('X-FILE-NAME', file.name);
        xhr.send(file);
    }
});

上周，我一直在為這段代碼而苦苦掙扎，並且幾乎遍歷該站點上的每個主題都沒有成功。 請有人幫我弄清楚為什么我不能將文件詳細信息發布到php腳本中。

Answer 1

我正在使用以下代碼將文件發布到PHP：

function postFile(action, file, postFileName) {

    var fPostName = typeof postFileName === 'undefined' ? 'file' : postFileName;
    /* Create a FormData instance */
    var formData = new FormData();
    /* Add the file */
    formData.append(fPostName, file);

    var requestUrl = rootUrl + action;

    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', requestUrl);

        /* handlers */
        xhr.onload = function () {
            if (this.status >= 200 && this.status < 300) {
                resolve(xhr.response);
            } else {
                reject({
                    status: this.status,
                    statusText: xhr.statusText
                });
            }
        };
        xhr.onerror = function () {
            reject({
                status: this.status,
                statusText: xhr.statusText
            });
        };

        console.log(formData);
        /* send request */
        xhr.send(formData);
    });
    }

// Sample usage
 *    <<< FILE upload >>>>>>
 *    var file = document.getElementById('f').files[0];
 *    console.log(file);
 *    postFile('your_processing_script.php', file).then(function (response) {
 *        console.log(response);
 *    },function (er) {
 *        console.log(er);
 *    });

然后在PHP中，您應該具有：

$_FILES["file"] or $_FILES[postFileName]

希望這對您有所幫助。 干杯