Javascript jQuery文件上载的单个进度

blueimp建议我使用jQuery文件上传

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

如何为每次上传做同样的事情？如何检索链接到此特定上载的DOM元素（progressbar）？我曾考虑过通过文件名和文件大小创建一个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'));
        });
    });

然后在处理进度时：

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

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

        }

:

---

我知道这是一个老问题，但它在谷歌搜索结果中出现得很高，并且提供的答案可能比标准用例所要求的更复杂

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

$（“#fileupload”）.fileupload({
...
添加：功能（e、数据）{
data.context=$（“
”）.text（'Uploading…）.appendTo（document.body）；
data.submit（）；
},
...
进度：功能（e、数据）{
var progress=parseInt（data.loaded/data.total*100,10）；
data.context.text（progress+'%'）；
}
});

在

php

（从5.4版和更高版本开始）中，有一个名为。它允许您监视单个文件的上载进度

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

---

还提到了

谢谢！但是如何知道它所指的特定文件呢？它应该嵌入到数据变量中。如果你没有成功，告诉我。好的，找到了。。没有标识，但对象与我最初的问题保持一致

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

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

        }

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

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