Question

您如何知道进度回调适用于哪个文件？

即使我将sequentialUploads设置为true，仅在IE10中（不是Chrome / FireFox / Safari），当我选择同时上传多个文件时，add callback中的data.files数组包含多个文件。对于所有其他浏览器，每个文件调用一次add回调，数组总是只有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'回调中添加一个progress元素（或提供反馈的任何其他标记），然后在'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);
    }
})

Blueimp文件上传，您如何知道进度回调的文件？

1 个答案: