5

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

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

4

2 回答 2

4

我应该只阅读名为How to tie a file to an element node during the life cycle during 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.');
        }
    });
});
于 2012-12-28T00:45:16.227 回答
3

您没有发布实际调用文件上传或绑定到进度事件的代码，但我的猜测是您只需要$.proxy在函数周围放置一个包装器fileuploadprogress。

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

于 2012-12-27T21:13:36.153 回答