Blueimp 文件上传，怎么知道进度回调是针对哪个文件的？答案

【问题标题】：Blueimp file upload, how do you know which file the progress callback is for?Blueimp 文件上传，怎么知道进度回调是针对哪个文件的？
【发布时间】：2013-07-17 19:27:44
【问题描述】：

你怎么知道进度回调是针对哪个文件的？

即使我将sequentialUploads 设置为true，但仅在IE10（不是Chrome/FireFox/Safari）中，当我选择同时上传多个文件时，添加回调中的data.files 数组包含多个文件。对于所有其他浏览器，每个文件都会调用一次 add 回调，数组总是只有 1 个文件。

所以我做了一个for循环来处理add回调中的每个文件，没问题。

但是，现在我正在更新进度回调，我看不到任何方法可以知道进度是针对哪个文件的。回调获取 2 个参数，“e”和“data”，并且数据对象已加载和总值，这给了我进度......但是哪个文件？有些处理回调有data.index告诉你是哪个文件，但是上传进度没有那个。

这只是缺少功能，还是我缺少什么？

我的代码现在有点难看，因为我正在尝试解决这些新的 IE10 问题。在此之前，我只是指望 data.files 数组始终只有一项这一事实。无论如何，这是我的代码，有机会我会尝试清理它：

self.initFileUpload = function(elem) {
         $(elem).fileupload({
             dataType: 'json',
             global: false,
             sequentialUploads: true,
             forceIframeTransport: !!ie,
             formData: { hostSID: app.viewModels.main.hostSID() },
             done: function(e, data) {
                 for (var x = 0; x < data.result.files.length; x++) {
                     var file = data.result.files[x];
                     var u = file.myObj;
                     u.sid = file.sid;
                     console.log("done: " + u.filename);
                     u.done(true);
                 }
             },
             add: function(e, data) {
                 for (var x = 0; x < data.files.length; x++) {
                     var file = data.files[x];
                     var u = [];
                     u.filename = file.name;
                     u.size = file.size;
                     u.perc = ko.observable(0);
                     u.error = ko.observable("");
                     u.done = ko.observable(false);
                     var ext = file.name.split('.').pop().toLowerCase();
                     u.image = utils.isImageExt(ext);
                     self.uploads.push(u);
                     file.myObj = u;
                     u.jqXHR = data.submit();
                 }
             },
             fail: function(e, data) {
                 for (var x = 0; x < data.result.files.length; x++) {
                     var file = data.result.files[x];
                     var u = file.myObj;
                     if (data.jqXHR && data.jqXHR.responseText)
                         u.error(data.jqXHR.responseText);
                     else
                         u.error("Unknown Error");
                     console.log("fail: " + u.filename);
                 }
             },
             progress: function(e, data) {
                 console.log(e);
                 console.log(data);
                 for (var x = 0; x < data.files.length; x++) {
                     var file = data.files[x];
                     console.log(file);
                     var u = file.myObj;
                     u.perc(parseInt(file.loaded / file.total * 100, 10));
                     console.log("perc: " + u.filename + " " + u.perc());
                 }
             },
             progressall: function(e, data) {
                 self.uploadPerc(parseInt(data.loaded / data.total * 100, 10));
             }
         });
     }

【问题讨论】：

你有没有设法弄明白？

标签： jquery file-upload blueimp

【解决方案1】：

“fileuploadprogress”回调包括 data.context。这是您可能在“fileuploadadd”回调中创建的标记的 jquery 对象。

您可以在“fileuploadadd”回调中添加进度元素（或任何其他提供反馈的标记），然后在“fileuploadprogress”中再次找到它并设置进度：

.on('fileuploadadd', function (e, data) {
    $.each(data.files, function (index, file) {
        data.context = $('<div/>', { class: 'pull-left text-center media_wrapper' }).appendTo('#thumbnails');
        $('<progress>', { value: '0', max: '100'}).appendTo(data.context)
    });
})
/* ... */
.on('fileuploadprogress', function (e, data) {
    if (data.context) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        data.context.find('progress').attr('value', progress);
    }
})

【讨论】：