jQuery文件上传中的个人进度

Question

我被推荐使用blueimp开发的jQuery文件上传插件。

但是我没能成功更新单独文件的进度。我理解如何使用文档中记录的合并后的进度。

progressall: function (e, data) 
        {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css('width', progress + '%');
            console.log(progress);
        }

如何针对每个上传文件执行相同的操作？如何检索与此特定上传文件相关联的DOM元素（进度条）？ 我考虑通过文件名和文件大小创建ID，但是由于用户可能多次上传相同的文件（到不同的目标），所以这种方法行不通。

目前我正在使用以下实现：

$('#fileupload').fileupload(
    {
        dataType: 'json',
        done: function (e, data) 
        {
            $.each(data.result.files, function (index, file) 
            {  
                //$('<p/>').text(file.name).appendTo(document.body); 
                //console.log('done with '+file.name);
            });
        },
        progressall: function (e, data) 
        {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            //$('#progress .bar').css('width', progress + '%');
            //console.log(progress);
        }
    }).on('fileuploadadd', function (e, data) 
    {
        $.each(data.files, function (index, file) 
        {

            var node = $('<div class="progressBox"></div>');
            node.append('<div class="progressBoxBack"></div>');
            node.append('<p><span class="progress-filename">'+file.name+' ('+index+')</span><br /><span class="progress-info">0%  0 ko/s  0 sec left</span></p>');
            node.append('<div class="progressBar"><div style="width:23%;"></div></div>');

            node.appendTo($('#progressContainer'));
        });
    });

有人能告诉我如何做，或者给我指向我找不到的文档吗？

解决方案

---

要识别上传文件，可以在添加文件对象时添加其他参数。 文件对象在进程事件中保持不变（但不在完成方法中）。 因此，在fileuploadadd上：

.on('fileuploadadd', function (e, data) 
    {
        $.each(data.files, function (index, file) 
        {
            file.uploadID = 'someidentification' ;
        });
    });

然后当你处理进度时：

progress: function (e, data) {
              var progress = parseInt(data.loaded / data.total * 100, 10);

              console.log(data.files[0].uploadID); // returns 'someidentification'

        }

- Vincent Duprez

Answer 1

根据文档，有一个单独的进度事件：

Options#progress 。

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        progress: function (e, data) {
              var progress = parseInt(data.loaded / data.total * 100, 10);
        },
        ...

- Fractaliste

---

谢谢！但是如何知道它指的是哪个特定的文件？ - Vincent Duprez

它应该嵌入到数据变量中。如果您无法获取它，请告诉我。 - Fractaliste

好的，找到了...没有标识，但对象保持不变。 - Vincent Duprez

添加到我的原始问题中。 - Vincent Duprez

Answer 2

我知道这是一个旧问题，但在谷歌搜索结果中，它排名相当靠前，而且提供的答案可能比标准用例要复杂。

数据对象提供了一个上下文属性，当您添加文件时，可以将其设置为将DOM元素与特定文件上传绑定。此上下文属性在done回调函数中传递并可用，您可以简单地使用它来影响链接DOM元素内的进度。

$("#fileupload").fileupload({

        ...

        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        },

        ...

        progress: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            data.context.text(progress + '%');
        }
    });

- Alpaus

Answer 3

在 PHP（从版本 5.4 开始）中有一个叫做“session upload progress”的东西。它允许你监控单个文件的上传进度。

虽然启动它可能相当麻烦，但你可以在谷歌搜索中找到一些例子，了解如何将它与 jQuery 结合使用在你的 XMLHttpRequest / Ajax 请求中 when you search in Google。

它还在 jquery 文件上传插件的文档这里中提到。

- Wilt