2013-06-04 78 views
1

我正在使用jquery-fileupload-rails Gem在我的應用程序中上載圖像。 下面是代碼:進度條在文件上傳後不會移除,jquery文件上傳

<script id="template-upload" type="text/x-tmpl"> 
    <div class="upload "> 
    {%=o.name%} 
    <div class="progress"><div class="bar" style="width: 0%"></div></div> 

<div class="photo-post-img"> 
<%= form_for Upload.new do |f| %> 
    <span class="btn btn-primary fileinput-button ml30"> 
    <b>+</b> 
    <span class="text-orange">Add image</span> 
    <%= f.file_field :upload, multiple: true, name: "upload[upload]" %> 
    <%= f.hidden_field :post_id, :value => @post.upload_id %> 
    <%= f.hidden_field :upload_type, :value => @post.upload_type %> 
    </span> 
<% end %> 
<div class="img-upload-list"> 
    <ul id="photos_uploaded" class="thumbnails pull-left"> 
    <% @post.uploads.each do |upload| %> 
     <li class="thumbnail" id="uploads-<%=upload.id %>"> 
     <%=image_tag upload.upload.url(:medium) %> 
     <%= link_to "Delete", upload, :remote => true, :method => "delete" %> 
     </li> 
    <% end %> 
    </ul> 
</div> 

而在.js文件:

jQuery(function() { 
    return $('#new_upload').fileupload({ 
    dataType: "script", 
    add: function(e, data) { 
    var file, types; 
    types = /(\.|\/)(gif|jpe?g|png)$/i; 
    file = data.files[0]; 
    if (types.test(file.type) || types.test(file.name)) { 
     data.context = $(tmpl("template-upload", file)); 
     $('#new_upload').append(data.context); 
     return data.submit(); 
    } else { 
     return alert("" + file.name + " is not a gif, jpeg, or png image file"); 
    } 
    }, 

    progress: function(e, data) { 
    var progress; 
    if (data.context) { 
     progress = parseInt(data.loaded/data.total * 100, 10); 
     return data.context.find('.bar').css('width', progress + '%'); 
     } 
    }, 
    done: function (e, data) { 
    $('.upload').attr('style', 'visibility: hidden'); 
    } 
}); 
}); 

每一件事工作正常,但圖片上傳後,進度條不刪除。上傳後如何刪除欄?

回答

3

而不是done回調添加stop回調在您的JS文件

stop: function (e, data) { 
    $('.upload').hide(); 
}, 
+0

工程爲一次性使用。 但是,如果您已將它設置爲允許多個文件上傳,並說人上傳了一對夫婦檔案。無論它實現什麼,例如批量水印。如果他們去上傳更多,沒有進度條。 –