无法将$ _FILES发送到php脚本

Question

I am trying to make a facebook like image uploader with the most basic methods. I select the multiple images on the input and then it creates the per file progress bars with names. It shows it's loading but it doesn't send to the upload.php file. I have the HTML code section:

<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>

Then I have my javascript. The progress bars get created with the file names and the progress is tracked. I have tried it with largish files and it does take a long while to upload. Progress bar shows this accurately.

$('#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);
    }
});

I have been struggling with this piece of code for the last week and have been through almost every topic on this site without success. Please could someone help me figure out why I can't post the file details to the php script.

Answer 1

I'm using this code to post files to 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);
 *    });

and then in PHP you should have:

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

Hope this helps you. Cheers