Question

我需要上传多个视频，我需要每个文件上传的进度条。我正在使用paperclip和查询文件加载器。我不知道我在哪里做错了，我能够上传多个文件，但我没有得到多个进度条。这是我的代码。请帮助我的人。

_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用于进度条。您应该根据需要动态地向视图中添加多个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>

关于此主题有一个很棒的轨道广播，但您需要一个专业帐户。

jquery文件上传器，用于具有多个进度条的多个文件

1 个答案: