javascript jQuery 文件上传的个人进度

Individual progress in jQuery file upload

提问by Vincent Duprez

I've been recommended to use jQuery file upload by blueimp.

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

But I fail to update the individual file progress. I understand how the combined progress works (as documented)

但是我无法更新单个文件的进度。我了解合并进度的工作原理（如文档所述）

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

How to do the same thing for every single upload? How do I retrieve the DOM element (progressbar) linked to this particular upload? I was thinking about creating an id by filename and file size, but as users could upload the same file twice (to different destinations) this doesn't work.

如何为每次上传做同样的事情？如何检索链接到此特定上传的 DOM 元素（进度条）？我正在考虑按文件名和文件大小创建 id，但由于用户可以将同一个文件上传两次（到不同的目的地），这不起作用。

This is my implementation at the moment:

这是我目前的实现：

$('#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'));
        });
    });

Can anybody tell me how or point me to documentation I haven't been able to find?

谁能告诉我如何或指向我无法找到的文档？

Solution

解决方案

---

---

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

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

then when you handle progress:

然后当你处理进度时：

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

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

        }

采纳答案by Fractaliste

According to the documentation there is a single progress event:

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

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

回答by Alpaus

I understand this is an old question but it comes up quite high in the Google Search results on this topic and the answer provided may be more complicated than required for the standard use case.

我知道这是一个老问题，但它在有关此主题的 Google 搜索结果中出现的频率很高，并且提供的答案可能比标准用例所需的更复杂。

The data object provides a context property which you can set when you add the file to tie a DOM element to that particular file upload. This is passed around and is available in the done callback and you can simply use it to affect the progress within the linked DOM element.

数据对象提供了一个上下文属性，您可以在添加文件以将 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 + '%');
        }
    });

回答by Wilt

In php(from version 5.4 and up) there is something called session upload progress. It allows you to monitor upload progress on individual files.

在php（从 5.4 版及更高版本）中，有一个叫做session upload progress. 它允许您监控单个文件的上传进度。

It can be pretty cumbersome to get it running but you can find some examples on how to combine it with jquery in your XMLHttpRequest / Ajax request when you search in Google.

让它运行可能非常麻烦，但是当您在 Google 中搜索时，您可以找到一些关于如何在 XMLHttpRequest/Ajax 请求中将它与 jquery 结合的示例。

It is also mentioned here in the documentation of the jquery file upload plugin

jquery文件上传插件的文档中也有提到这里