Question

关于jQuery File Upload，有一个progress事件会传回一个data对象，根据我的理解，它会报告每个文件的进度。

我正在通过add()事件将文件和进度条添加到我的UI，我想稍后在progress()事件中更新各自的进度条。我遇到的问题是如何匹配它们？

我需要为每个文件提供一个唯一的ID，以便我可以将它们配对，但是就我所见，我找不到一个。我们该怎么做呢？

每个File对象可能都有一些JavaScript哈希码吗？

一些代码：

$('#fileupload').fileupload({
    url: 'api/combox_upload.php',
    dataType: 'json',
    dropZone: $dropZone,
    done: function (e, data) {
        $.each(data.result, function(index, file) {
            // indicate completeness
        });
    },
    add: function(e, data) {
        $.each(data.files, function(index, file) {
            console.log(file);
            $file_uploads.append($('<li>').text(file.name));
        });
        data.submit(); // start upload immediately
    },
    progress: function(e, data) {
        console.log(data);
    }
});

我想我可以使用$.data为每个文件附加一个唯一的ID，如下所示：

var fileId = 0;

$('#fileupload').fileupload({
    url: 'api/combox_upload.php',
    dataType: 'json',
    dropZone: $dropZone,
    done: function (e, data) {
        $.each(data.result, function(index, file) {
            // indicate completeness
        });
    },
    add: function(e, data) {
        $.each(data.files, function(index, file) {
            //console.log(file);
            console.log(filename, fileId);
            $.data(file, 'id', fileId++);
            $file_uploads.append($('<li>').text(file.name));
        });
        data.submit(); // start upload immediately
    },
    progress: function(e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $.each(data.files, function(index, file) {
            console.log($.data(file,'id'), file.name, progress);
        });
        //console.log(data);
    }
});

我现在感到困惑的部分是，在progress事件中它不只是给你一个文件，它给你一个包含1个文件的数组......我不确定是否保证总是只有1个文件（data.files）。

Answer 1

我应该阅读名为How to tie a file to an element node during the life cycle of an upload的部分：

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

Answer 2

您没有发布实际调用文件上传或绑定到progress事件的代码，但我猜您只需要在fileuploadprogress函数周围添加$.proxy包装。 / p>

$.proxy函数允许您指定函数中this将引用的内容。然后，在您的功能中，您将可以访问data，this将能够提供上下文。

如何确定哪个文件的进度是？

2 个答案: