Rails + Amazon s3 + jqueryファイルのアップロード：アップロードプログレスバーが機能しない？

Question

こんにちは、railscasts jqueryファイルアップロードチュートリアルの進行状況バーコード（http://railscasts.com/episodes/381-jquery-file-upload）を使用しています。Amazon S3を追加する前に正常に動作していました。私はjqueryファイルのUIのない​​アップロードの基本的なバージョンを使用しています。

バーが表示されますが、写真は完全にアップロードされていますが、空白の灰色のバーです。この背後には理由がありますか？そしてこれを行う別の方法があります（それが働くように）？

写真/ 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

Answer 1

それは助けることができるならば、私はそれについてのチュートリアルを書いた：http://pjambet.github.com/blog/direct-upload-to-s3/を、そしてライブデモがあります：http://direct-upload.herokuapp.com/photosコードはgithubの上でホストされている：https://github.com/pjambet/direct-upload

Answer 2

ライアンはあなたのCSSファイルでスタイルを追加することが必要であること伝えるために一つのことを逃しました彼のコードを見ると、彼のpainting.cssファイルに次のスタイルがあります。

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