javascript - 如何使用 javascript 发送多个文件而不是 jQuery 我想要每个文件一个进度条？

Question

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

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);
 }

Answer 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))) + '%';
        });
}