2012-12-27 2 views
7

jQuery 파일 업로드 (Blueimp http://goo.gl/y1Y2b)를 사용하여 각 파일의 진행률 막대를 만드는 방법은 무엇입니까? 여러 양식이 있고 각 양식에 업로드 버튼이 있습니다.각 파일에 대한 Blueimp/Jquery 파일 업로드 진행률 표시 줄

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

I가에 붙어 같은 지점. 이걸 가로 질렀습니까? 요. u 응답을 추가 하시겠습니까? – coderunner

+0

나는 이렇게한다 : HTML ' ' JS : '$은 (윈도우) .load (함수() { \t는 '엄격한 사용'; $()를 파일 업로드 ({ \t \t dataType와 'JSON' '형태 업로드.'. \t \t autoUpload : 사실, \t \t URL :. $ ('. 폼 업로드') ATTR ('데이터 URL 업로드'), \t \t MAXFILESIZE : 5000000 \t}); ' – Tommy

답변

2

음, 해결, 난 그냥 할이 :

나는이 작업을 수행 : 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 
    }); 
+0

업데이트 주셔서 감사합니다! :) – coderunner