Question

我刚开始使用javascript进行冒险。我想分别使用ajax上传每个文件的进度条。对于一个文件，它适用于一个文件，但对于更多文件，进度看起来完全相同。如何单独找到每个文件的加载和总计？

function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("plik").files;
        // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    //formdata.append("plik", file);
    var ajax = new XMLHttpRequest(),
    x;
    for(x = 0; x < file.length; x = x + 1) {
        formdata.append('plik[]', file[x]);

    }

    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "gc.php");
    ajax.send(formdata);
}
function progressHandler(event){
    var file = _("plik").files;
    var Pr = document.getElementById('uploadProgressStatus');
    Pr.style.display= "block";
    //console.log(file.[].name);
    var text = "";
    for(x = 0; x < file.length; x = x + 1) {

    text+=   '<div style="padding-top: 10px; padding-left: 20px; padding-bottom: 20px; display: none;" ><span style="float: left;"><img src="/assets/images/upload.gif"></span><div>'+file[x].name+'</div><div id="ProgressBarBg'+x+'" style="width:300px; height: 2px; background: #DCDADA;"><div id="progressBar'+x+'" style="position: relative; top:0px; background: #5D9BF7; width:0%; height: 2px; color: #0FF; text-align:center;"></div></div></div>';

    }
_("uploadProgressStatus").innerHTML = text;
    for(x = 0; x < file.length; x = x + 1) {

        var ProgressBarBg = document.getElementById('ProgressBarBg'+x);
    ProgressBarBg.style.display= "block";
    var percent = (event.loaded / event.total) * 100;

var progressBar = document.getElementById('progressBar'+x);
progressBar.style.width = percent + "%";
if(percent === 100) {
    completeFile()
}
    }
}
}
function completeFile(filenumber) {

}
function completeHandler(event){
/*  var file = _("plik").files;
    for(x = 0; x < file.length; x = x + 1) {
$("#status").html("moze być");
  } */
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}

Answer 1

你的进步＆＃34; event只绑定了一个ajax.upload对象。如果要跟踪每个文件的上载进度，则需要为每个文件上载创建一个ajax对象。我重写了uploadFile（）函数。我为每个文件创建一个新的formData对象和一个ajax对象，并绑定＆＃34; progress＆＃34;事件到每个ajax.upload。因此，只要上传_（＆＃34; plik＆＃34;）。文件中的文件，就会调用progressHandler（）。

function uploadFile(){
    for(var x = 0; x < file.length; x++) {
        var file = _("plik").files,
            formdata = new FormData(),
            ajax = new XMLHttpRequest();
        formdata.append('plik', file[x]);
        ajax.upload.addEventListener("progress", progressHandler, false);
        ajax.open("POST", "gc.php");
        ajax.send(formdata);
    }
}

尝试重写progressHandler（）函数，如下所示。每次上传文件时，您都应该能够看到一个不断变化的百分比，表示该特定文件的上传进度。

function progressHandler(event) {
    if (event.lengthComputable) {
        var percentage = Math.round((event.loaded * 100) / event.total);
        _("uploadProgressStatus").innerHTML = percentage.toString() + "%"
    }
}

如何分别为每个文件加载和总计？

1 个答案: