jquery文件上傳多個進度條的多個文件

Question

我有上傳多個視頻的需求，我需要每個文件上傳進度欄。我使用回形針和查詢文件上傳加載程序。我不知道我做錯了什麼，我可以上傳多個文件，但我沒有得到多個進度條。我的code.please幫助我出去的人。

_form.html.erb：

<%= form_for @course,:html => { :multipart => true } do |f| %> 
    <% if @course.errors.any? %> 
     <div id="error_explanation"> 
      <h2><%= pluralize(@course.errors.count, "error") %> prohibited this course from being saved:</h2> 
      <ul> 
       <% @course.errors.full_messages.each do |msg| %> 
        <li><%= msg %></li> 
       <% end %> 
      </ul> 
     </div> 
    <% end %> 
    <div class="field"> 
     <%= f.label :music %><br /> 
     <%= f.text_field :music %> 
    </div> 
    <div class="field"> 
     <%= f.label :description %><br /> 
     <%= f.text_area :description %> 
    </div> 
    <div id="upload-file-container"> 
     <%= f.file_field :video, multiple:true, id: "fileupload", name: "course[video]"%> 
    </div> 
    <div id="progress"> 
     <div class="bar" style="width: 0%;"></div>`` 
    </div> 
<% end %> 


courses.js 


jQuery(function() { 

$('#fileupload').fileupload({ 
    dataType: 'json', 
    add: function (e, data) { 
    $.each(data.files, function (index, file) { 
     $('<p/>').text("Uploading ... "+file.name).appendTo(document.body); 
    }); 
    data.submit(); 
}, 
done: function (e, data) { 
    $.each(data.files, function (index, file) { 
     $('<p/>').text("Upload complete ..."+file.name).appendTo(document.body); 
    }); 
}, 
change:function (e, data) { 
    $.each(data.files, function (index, file) { 
     data.context = $('<p/>').text('Selected file: ' + file.name).appendTo(document.body); 
    }); 
} 
}).on('fileuploadprogress', function (e, data) { 
    var progress = parseInt(data.loaded/data.total * 100, 10); 
    $('#progress .bar').css('width',progress + '%').text(progress + '%'); 
    if (data.loaded == data.total) { 
     $('#progress').hide(); 
     $('#progress .bar').css('width', '0%'); 
    } 
}); 
}); 

Answer 1

你只需要一個格在你的進度條查看。您應該在需要時動態地將多個div添加到視圖中，您可以使用jquery模板（例如https://github.com/BorisMoore/jquery-tmpl）來實現這一點。

如果你使用jQuery的TMPL，它看起來是這樣的：

$('#fileupload').fileupload({ 
    dataType: 'json', 
    add: function (e, data) { 
    $.each(data.files, function (index, file) { 
     $('<p/>').text("Uploading ... "+file.name).appendTo(document.body); 
    }); 
    #=> file = data.files[0]; 
    #=> data.tmpl = $(tmpl("#my-template", file)); 
    #=> $("#some-div").append(data.tmpl); 
    data.submit(); 
} 


.on('fileuploadprogress', function (e, data) { 
    var progress = parseInt(data.loaded/data.total * 100, 10); 
    #=> if (data.tmpl){ 
    #=> data.tmpl.find('.bar').css('width', progress + '%') 
    #=>} 
    if (data.loaded == data.total) { 
     $('#progress').hide(); 
     $('#progress .bar').css('width', '0%'); 
    } 
}); 

觀點：

<script id="my-template" type="text/x-tmpl"> 
<div class="upload"> 
    <div class="progress"><div class="bar" style="width: 0%"></div></div> 
</div> 
</script> 

有關於這一主題有很大railscast，但你需要一個親帳戶。