Question

我想上传多个文件并希望显示其进度。我正在尝试以下代码。这是我的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;
}

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

Answer 1

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

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

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

Answer 2

您需要保存i，因为它会在onprogress被解雇之前更改。

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

阅读以前答案的解释：http://developer.android.com/reference/android/support/design/widget/AppBarLayout.html

用javascript多个文件上传进度条

2 个答案: