使用 blueimp 文件上传延迟 data.submit() 的进度

Question

我有一个案例，我必须先保存表单 - 以获得一个 id - 上传的文件将与之相关。

我工作正常 - 但到目前为止我无法从 data.submit(); 获得任何进度数据。

有可能吗？

这是我的代码：首先收集待处理列表中的数据对象：

var pendingList = [];
$('#fileupload').fileupload({
    dropZone: $('#drop-area'),
    uploadTemplateId: null,
    downloadTemplateId: null,
    url: multi_upload_action,
    autoUpload: false,
    add: function (e, data)
    {
        $.each(data.files, function (index, file)
        {
            var row = $('<div class="template-upload">' +
                '<div class="table-cell">' +
                '<div class="name">' + file.name + '</div>' +
                '<div class="error"></div>' +
                '</div>' +
                '<div class="table-cell">' +
                '<div class="size">Processing...</div>' +
                '</div>' +
                '<div class="table-cell">' +
                '<div class="progress" style="width: 100px;"></div>' +
                '</div>' +
                '</div>');

            // fetching formatted size;
            var file_size = formatFileSize(file.size);

            row.find('.size').text(file_size);

            data.context = row.appendTo($(".content_upload_download"));
        });

        pendingList.push(data);
    },
    limitConcurrentUploads: 1,
    maxChunkSize: 8388000
});

然后 - 稍后 - 发送带有额外信息的文件：

sendAllFiles = function (id, redirect_action)
{
    var total_files = pendingList.length;
    var n = 0;
    pendingList.forEach(function (data)
    {
        data.formData = {id: id};
        data.submit()
            .done(function (data, status)
            {
                n++;
                $.each(data.files, function (index, file)
                {
                    if (typeof file.error != 'undefined' && file.error)
                    {
                        alert(file.name + ': ' + file.error);
                    }
                });
                if (n == total_files)
                {
                    window.location.href = redirect_action;
                }
            });
    });
};

问候

Answer 1

找到适合我的解决方案：

1. 在添加时为每个文件创建隐藏的开始按钮
2. 提交主表单，接收额外信息
3. 将新信息附加到文件上传实例的url
4. 遍历所有开始按钮并启动点击事件
5. 上次上传完成后重定向页面

    sendAllFiles = function (id)
    {

        $('#fileupload').fileupload(
            'option',
            'url',
            phpGWLink('index.php', {menuaction: 'helpdesk.uitts.handle_multi_upload_file', id: id})
            );

        $.each($('.start_file_upload'), function (index, file_start)
        {
            file_start.click();
        });
    };

    $('#fileupload').fileupload({
        dropZone: $('#drop-area'),
        uploadTemplateId: null,
        downloadTemplateId: null,
        autoUpload: false,
        add: function (e, data)
        {
            $.each(data.files, function (index, file)
            {
                var file_size = formatFileSize(file.size);

                data.context = $('<p class="file">')
                    .append($('<span>').text(data.files[0].name + ' ' + file_size))
                    .appendTo($(".content_upload_download"))
                    .append($('<button type="button" class="start_file_upload" style="display:none">start</button>')
                        .click(function ()
                        {
                            data.submit();
                        }));

                pendingList++;

            });

        },
        progress: function (e, data)
        {
            var progress = parseInt((data.loaded / data.total) * 100, 10);
            data.context.css("background-position-x", 100 - progress + "%");
        },
        done: function (e, data)
        {
            file_count++;

            var result = JSON.parse(data.result);

            if (result.files[0].error)
            {
                data.context
                    .removeClass("file")
                    .addClass("error")
                    .append($('<span>').text(' Error: ' + result.files[0].error));
            }
            else
            {
                data.context
                    .addClass("done");
            }

            if (file_count === pendingList)
            {
                window.location.href = redirect_action;
            }

        },
        limitConcurrentUploads: 1,
        maxChunkSize: 8388000
    });