Загрузка файла Blueimp, как узнать, для какого файла предназначен обратный вызов хода выполнения?

Question

Как узнать, для какого файла предназначен обратный вызов прогресса?

Несмотря на то, что я установил для sequentialUploads значение true, только в IE10 (не Chrome/FireFox/Safari), когда я выбираю несколько файлов для загрузки одновременно, массив data.files в обратном вызове add содержит несколько файлов. Во всех других браузерах обратный вызов add вызывается один раз для каждого файла, а массив всегда представляет собой всего один файл.

Поэтому я делаю цикл 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. Это объект jquery разметки, который вы могли создать в обратном вызове fileuploadadd.

Вы можете добавить элемент прогресса (или любую другую разметку для обеспечения обратной связи) в обратный вызов 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);
    }
})