无法将 $_FILES 发送到 php 脚本答案

【问题标题】：Unable to send $_FILES to php script无法将 $_FILES 发送到 php 脚本
【发布时间】：2017-04-10 00:12:27
【问题描述】：

我正在尝试用最基本的方法制作一个类似 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 脚本。

【问题讨论】：

你怎么知道它没有发送？

标签： javascript php xmlhttprequest image-uploading

【解决方案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]

希望这对您有所帮助。干杯

【讨论】：