Question

我正在尝试使用最基本的方法制作像图像上传器一样的脸书。我在输入上选择多个图像，然后创建带有名称的每个文件进度条。它显示它正在加载，但它不会发送到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]

希望这会对你有所帮助。干杯

无法将$ _FILES发送到php脚本

1 个答案: