如何使用 javascript 发送多个文件没有 jQuery 我想要每个文件一个进度条？答案

【问题标题】：How send multiple files with javascript no jQuery i want for each file one progress bar?如何使用 javascript 发送多个文件没有 jQuery 我想要每个文件一个进度条？
【发布时间】：2015-03-20 09:59:13
【问题描述】：

我有这个代码，这是我的对象：

var sendData = function(ob) {
    var obj = ob;

    return {
        send: function() {
            obj.myform.onsubmit = function(e) {
                var file = obj.file.files;

                var ajax = new XMLHttpRequest();
                var formdata = new FormData();
                for(var i = 0; i < file.length; i++) {
                    formdata.append(data[], file[i]);
                }

                ajax.upload.onprogress = function(event) {
                    oojs.byID('container').innerHTML = Math.round((event.loaded / event.total)*100)+"%";
                }

                ajax.onload = function() {
                    oojs.byID('container').innerHTML = "Done";
                }

                ajax.onerror = function() {
                    oojs.byID('container').innerHTML = "Error";
                }

                ajax.onabort = function() {
                    oojs.byID('container').innerHTML = "Abort";
                }

                ajax.open("POST", "result.php");

                ajax.send(formdata);
                e.preventDefault();
            }
        }
    }
}

oojs.sendData = sendData;

我希望每个文件都有一个进度条，但是现在我只有一个进度条，

for(var i = 0; i < file.length; i++) {
    formdata.append(data[], file[i]);
}

在这个循环中，每个文件都被添加到表单数据中，我想特别为每个文件发送表单数据。我已经尝试这样做了：

for(var i = 0; i < file.length; i++) {
    var formdata = new FormData();
    formdata.append(data, file[i]);

    // ... 

    ajax.send(formdata);
 }

【问题讨论】：

这个神奇的 data[] 值是什么？

标签： javascript ajax progress-bar form-data

【解决方案1】：

你能不能试试这样的：

function sendFile (file, progressCallback) {
        var ajax = new XMLHttpRequest();
        var formdata = new FormData();
        formdata.append(file.name, file);
        ajax.upload.onprogress = function(event) {
            progressCallback(Math.round((event.loaded / event.total)*100));
        };
        ajax.onload = function() {
            oojs.byID('container').innerHTML = "Done";
        };

        ajax.onerror = function() {
            oojs.byID('container').innerHTML = "Error";
        };

        ajax.onabort = function() {
            oojs.byID('container').innerHTML = "Abort";
        };

        ajax.open("POST", "result.php");

        ajax.send(formdata);
    }

var progress = 0;
var filesLength = files.length;
for(var i = 0; i < filesLength; i++) {
    sendFile(files[i], function (x) {
        progress = progress + x;
        oojs.byID('container').innerHTML = (Math.round((progress / filesLength))) + '%';
        });
}

【讨论】：