Blueimp / jquery file upload execution progress template for each file

Question

How to create a progress bar for each file loading a jQuery file (Blueimp http://goo.gl/y1Y2b )? I have several forms, and each form has a download button.

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

Answer 1

Well, I decided, I'm just doing this:

I am doing this: 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 });