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

有人能告诉我如何或指出我无法找到的文件吗？

解决方案

<小时/> 要标识上载，可以在添加时向文件对象添加其他参数。文件对象在progress事件中保持不变（但不在done方法中）所以在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'

        }

Answer 1

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

数据对象提供了一个上下文属性，您可以在添加文件时将其设置为将DOM元素绑定到特定文件上载。这是传递并在完成回调中可用，您可以简单地使用它来影响链接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 + '%');
        }
    });

Answer 2

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);
        },
        ...

Answer 3

在php（从版本5.4及更高版本）中，有一些名为session upload progress的内容。它允许您监视单个文件的上载进度。

让它运行起来非常麻烦，但你可以在XMLHttpRequest / Ajax请求 when you search in Google中找到一些如何将它与jquery结合起来的例子。

还提到here in the documentation of the jquery file upload plugin

jQuery文件上传的个别进展

解决方案

3 个答案: