Question

我写过一个纯粹的javascript ajax上传器。

在这里，您可以看到附加到元素的progress event。如何循环遍历文件数组，然后为每个数组显示一个进度条？

以下是处理progress-event的代码部分：

`request.upload.addEventListener（'progress'，function（event）{ var progress = document.getElementById（'progressBar'）;

    if(event.lengthComputable)
    {                       

        // get the loaded amount in decimals. For instance: if 50kbs of a 100kbs file is loaded, it equals 0.5
        var percent = event.loaded / event.total;

        // now fill in the progressBar div with a dynamic percentage change. 
        if(progress.hasChildNodes())
        {
            progress.removeChild(progress.firstChild);  
        }

        progress.appendChild(document.createTextNode(Math.round(percent*100)+" %")); // this converts the decimals to a integer number between 0-100 representing the percentage. 
    }`

这是我的文件数组（我需要为用户选择的每个文件创建一个单独的进度条，因为这个上传允许多个文件选择）：

var file = document.getElementById('file');

    // assigning a new FormData
    var data = new FormData();

    // now append selected files to the data object
    for(var i = 0; i < file.files.length; ++i)
    {
        // append each file to the data object
        data.append('file[]', file.files[i]);   
    }

Answer 1

不要为每次进度更新删除/创建。只需更改div的宽度即可显示进度：

<div style="border:1px solid #000;background-color:#fff;width:200px;">
    <div id="progress" style="width:0%;"></div>
</div>

现在正在进行事件，只是更改了$（“＃progress”）的宽度％。或者只是替换它的innerHTML，如果你显示一个字符串“65％完成”

Answer 2

对于i的每个值，创建一个进度指示器的副本并将其放在一个数组中，使其位于位置i。如果您在需要更新时不知道索引，请使用对象或为其提供ID，以便找到要更新的对象。

javascript如何为每个文件创建一个进度条

2 个答案: