使用javascript的多文件上传进度条

我想上传多个文件并显示它们的进度。 这是我的html代码

<div id='albumBox'>
    <input type='file' multiple name='newsfeedAlbum[]' id='newsfeedAlbum' onchange='uploadNewsfeedImages()' />
<div>
<div id='uploadingImages'>
</div>
<div>
    <preogress id='progressBar'> </progress>
</div>
<div>
    <input type='button' id='albumButton' value='post' disabled />
</div>

这是我的javascript代码

function uploadNewsfeedImages()
{
    alert(document.getElementById("newsfeedAlbum").files.length);
    var files = document.getElementById("newsfeedAlbum").files;
    for(var i = 0;i < files.length;i++)
    {
        var file = files[i];
        //alert("file name is "+files.item(i).name);
        var formData = new FormData();
        formData.append("image",file);
        var xhr = new XMLHttpRequest();
        xhr.open("POST","add_newsfeed.php",true);
        alert(i);
        xhr.upload.onprogress = function()
        {
            alert("bujji" + i);
        }
        xhr.send(formData);
    }
}
function showUploadProgress(event)
{
    var uploaded = event.loaded/event.total;
    uploaded = Math.floor(uploaded*100);
    document.getElementById("progressBar").value = uploaded;
}

函数uploadNewsfeedImages（）
{
警报（document.getElementById（“newsfeedAlbum”）.files.length）；
var files=document.getElementById（“newsfeedAlbum”）.files；
对于（var i=0；i

---

但是，当我尝试上载两个图像并在upload.progress事件时发出警报时，它会向bujji2和bujji2发出警报，而不是向bujji0和bujji1发出警报。如何处理单个upload.progress事件……

这是一个范围问题。在onprogress事件触发时，for循环将已完成，因此每次onprogress触发时，“i”将为2，因为您的“for循环”已完成运行

您可以将onprogress函数包装在闭包中以获得所需的效果

xhr.upload.onprogress = (function() {
    return function() {
        alert('bujji' + i);
    };
}());

---

您需要保存您的

i

，因为它将在启动

onprogress

之前更改

    xhr.upload.fileNum = i;
    xhr.upload.onprogress = function()
    {
        alert("bujji" + this.fileNum);
    }
    xhr.send(formData);

---

阅读前面答案的解释：

如何使用html5和javascript实现多个文件上传进度条如何使用html5和javascript实现多个文件上传进度条