Rails + Amazon s3 + jquery文件上傳：上傳進度條無法正常工作？

您好我目前使用railscasts jquery文件上傳教程的進度條代碼（http://railscasts.com/episodes/381-jquery-file-upload），並且在添加Amazon S3之前它工作正常。我只使用沒有UI的jquery文件上傳的基本版本。Rails + Amazon s3 + jquery文件上傳：上傳進度條無法正常工作？

酒吧顯示，但它只是一個空的灰色欄（儘管圖片完全上傳）。這背後有一個原因嗎？還有另一種方式來做到這一點（以便它的工作原理）？

照片/ new.html.erb

<div class="clearfix"> 

<div class="uploadreminder"> 
    Upload multiple pictures at once or drag them directly to the browser! 
</div> 
<%= form_for([@user, @album, @photo], :html => { :multipart => true }) do |f| %> 

<%= f.file_field :avatar, multiple: true, name: "photo[avatar]" %> 

<% end %> 

<div class="finisheduploading"> 
    <%= link_to "Back to album", user_album_path(@user, @album) %> 
</div> 



<div id="pics"> 
    <%= render :partial => "photo", :collection => @photos %> 
</div> 


    #this is the part that is supposed to make the progress bar 
<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> 
</script> 
</div>

的application.js

//= require jquery 
//= require jquery_ujs 
//= require fancybox 
//= require 'js/bootstrap.js' 
//= require jquery-fileupload/basic 
//= require jquery-fileupload/vendor/tmpl 
//= require_tree . 

$(document).ready(function() { 

    $("a.fancybox").fancybox(); 
    $("a.fancybox").attr('rel', 'gallery').fancybox(); 


});

photos.js.coffee

jQuery -> 
$('#new_photo').fileupload 
    dataType: "script" 
    add: (e, data) -> 
    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_photo').append(data.context) 
     data.submit() 
    else 
     alert("#{file.name} is not a gif, jpeg, or png image file") 
    progress: (e, data) -> 
    if data.context 
     progress = parseInt(data.loaded/data.total * 100, 10) 
     data.context.find('.bar').css('width', progress + '%')

我的完整代碼是在這裏：https://github.com/EdmundMai/pholderbeta/blob/master/app/views/photos/new.html.erb

來源

2012-10-25 Edmund

，如果它可以幫助，我寫了一篇關於教程：http://pjambet.github.com/blog/direct-upload-to-s3/，並有一個現場演示：http://direct-upload.herokuapp.com/photos代碼在GitHub上託管：https://github.com/pjambet/direct-upload

來源

2012-10-25 21:36:01 pjam

你好Pjam，我剛剛通過你的教程和演示，但它不允許我一次上傳多個文件嗎？ – Shaunak

嗨，在我的教程中，我沒有使用多選項。但從我記得的地方來看，只需在文件輸入中加入'multiple'就可以上傳多個文件。然後你有更多的工作要處理這些文件，但你應該能夠做到。讓我知道你是否需要更多細節 – pjam

瑞安錯過了一兩件事要告訴你必須在你的CSS文件中添加樣式如果你看他的代碼，你會在他的painting.css文件中找到以下樣式。

.upload .progress .bar { 
    background: none repeat scroll 0 0 #3EC144; 
    height: 100%; 
}

來源

2014-08-18 07:09:50

Rails + Amazon s3 + jquery文件上傳：上傳進度條無法正常工作？

回答

相關問題