jquery - Blueimp文件上传，如何知道进度回调是针对哪个文件的？

Question

如何知道进度回调是针对哪个文件的？

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

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

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

这只是缺少功能，还是我缺少某些东西？

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

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));
             }
         });
     }

Answer 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);
    }
})