Blueimp文件上传，您如何知道进度回调用于哪个文件? [英] Blueimp file upload, how do you know which file the progress callback is for?

问题描述

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

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

Even though I set sequentialUploads to true, in IE10 only (not Chrome/FireFox/Safari), when I select multiple files to upload at the same time, the data.files array in the add callback contains multiple files. With all other browsers, the add callback is called once for each file, the array is always just 1 file.

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

So I do a for loop to handle each file in the add callback, no problem.

但是，现在我正在更新进度回调，但看不到任何方法可以知道进度用于哪个文件.回调获得2个参数"e"和"data"，并且数据对象已加载并且具有总计值，这些值可以为我提供进度...但是对于哪个文件?一些处理回调具有data.index来告诉您它是哪个文件，但是上载进度没有.

However, now I'm updating the progress callback, and I don't see any way to know which file the progress is for. The callback gets 2 parameters, "e" and "data", and the data object has loaded and total values that give me the progress... but for which file? Some of the processing callbacks have data.index to tell you which file it is, but the upload progress doesn't have that.

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

Is this just missing feature, or am I missing something?

我的代码现在很难看，因为我正在尝试解决这些新的IE10问题.在此之前，我只是指望data.files数组始终只是一项.无论如何，这是我的代码，如果有机会，我会尝试将其清除:

My code is kind of ugly right now because I'm trying to resolve these new IE10 issues. Prior to this I was just counting on the fact that the data.files array was always just 1 item. Here is my code anyway, I'll try to clean it up when I have a chance:

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

推荐答案

"fileuploadprogress"回调包含data.context.这是您可能在'fileuploadadd'回调中创建的标记的jquery对象.

The 'fileuploadprogress' callback includes data.context. This is a jquery object of the markup that you might have created in the 'fileuploadadd' callback.

您可以在'fileuploadadd'回调中添加一个progress元素(或提供反馈的任何其他标记)，然后在'fileuploadprogress'中再次找到它并设置进度:

You can add a progress element (or any other markup to provide feedback) in the 'fileuploadadd' callback, then find it again in the 'fileuploadprogress' and set the progress:

.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文件上传，您如何知道进度回调用于哪个文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！