Question

我目前正在尝试构建一个ajax图像上传器，除了一个重要部分之外我还能使用它。

对于我上传的每个单独文件，我想更新该文件的进度条。目前它只更新最后一个文件进度条。

       $("#upload-btn").click(function() {
            console.log("Click");

            for (var i = 0; i < files.length; i++) {
                var fd = new FormData();
                fd.append("file", files[i]);
                fd.append("__RequestVerificationToken", $("input[name='__RequestVerificationToken']").val());

                var xhr = new XMLHttpRequest();
                xhr.open('POST', "@Url.Action("AjaxUpload")", true);

                var filename = files[i].name;

                xhr.upload.onprogress = function (e) {
                    if (e.lengthComputable) {
                        var percentComplete = (e.loaded / e.total) * 100;
                        console.log(percentComplete + '% uploaded');

                        var progressbar = $('a[data-name="' + files[i].name + '"]').siblings(".progress").find(".progress-bar");
                        progressbar.css("width", percentComplete + "%");
                    }
                };

                xhr.onload = function () {
                    console.log(this.status);
                    if (this.status == 200) {
                        var resp = JSON.parse(this.response);
                        console.log('Server got:', resp);
                    };
                };

                xhr.send(fd);
            }
        });

正如您可能从代码中猜到的那样，我在javascript上非常糟糕......非常感谢任何帮助。

Answer 1

您需要在进度回调中确定文件名的范围，目前它只使用i的最后一个值。使用此代码替换您设置onprogress处理程序的位置。

(function(filename) {
    xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
           var percentComplete = (e.loaded / e.total) * 100;
           console.log(percentComplete + '% uploaded');

           var progressbar = $('a[data-name="' + filename + '"]').siblings(".progress").find(".progress-bar");
           progressbar.css("width", percentComplete + "%");
        }
    };
})(files[i].name);

Answer 2

你可以做这样的事情。设置xhr.upload的附加参数

// Set custom properties
xhr.upload.targetFileName = fileName;

然后像这样访问正在进行的处理程序

xhr.upload.onprogress = function (e) {
   
   // Access custom properties. 
   var fileName = e.target.targetFileName;
}

此处有更多详细信息：https://hacks.mozilla.org/2009/06/xhr-progress-and-richer-file-uploading-feedback/ 查看源代码：http://mozilla.pettay.fi/xhr_upload/xhr_file_upload_demo_with_speed.html

来自xhr in循环的多个onprogress事件处理程序

2 个答案: