每个文件的Blueimp / Jquery文件上传进度条

Question

如何使用jQuery文件上传（Blueimp http://goo.gl/y1Y2b）为每个文件创建进度条？我有多个表单，每个表单都有一个上传按钮。

$('.fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
    var formContainer = $($(this).parent()).parent();
    var file = data.files[0];
    var li  = $('<li/>').attr("id", 'li-upload-'+file.id).appendTo($(formContainer).children('.ul-files'));
    var link= $('<a/>').attr("href", '#').attr("data-href", file.delete_url).addClass("link-remove-file pull-right").attr("target", "_parent").attr("title", "Remove").appendTo(li);
    var ico = $('<i/>').addClass('icon-remove').appendTo(link);
    var spn = $('<span/>').html(file.name+' ('+Math.round(file.size/1024)+' K)').appendTo(li);
    var lod = $('<div/>').addClass('container-progress-upload').css("float", 'right').appendTo(li);
    var prg = $('<div/>').addClass('bar').css("width", '0%').attr("id", 'pgr-'+file.name).appendTo(lod);
    data.submit();
},
progress: function (e, data) {
    var file = data.files[0];
    var progress = parseInt(data.loaded / data.total * 100, 10);

    $('#pgr-'+file.name).css(
        'width',
        50 + '%'
    );
}
});

- Tommy

---

我卡在同一个点了，你解决了吗？能否提供答案？ - coderunner

我这样做： HTML <input class="fileupload" type="file" name="files[]" data-url="<?php echo site_url('ticket/postFile');?>" multiple>JS: $(window).load(function () { 'use strict'; $('.form-upload').fileupload({ dataType: 'json', autoUpload: true, url: $('.form-upload').attr('data-url-upload'), maxFileSize: 5000000 }); - Tommy

Answer 1

好的，我会尽力为您翻译如下内容：

好了，问题解决了，我只需要这样做：

我这样做： HTML

<form id="frm-resposta-{CODHIST}" class="form-horizontal form-upload" method="post" action="<?php echo site_url('ticket/salvarhistorico');?>" enctype="multipart/form-data" data-url-upload="<?php echo site_url('ticket/postFile');?>">
<input class="fileupload" type="file" name="files[]" data-url="<?php echo site_url('ticket/postFile');?>" multiple>

JS:

$(window).load(function () {
    'use strict';
$('.form-upload').fileupload({
        dataType: 'json',
        autoUpload: true,
        url: $('.form-upload').attr('data-url-upload'),
        maxFileSize: 5000000
    });

- Tommy