Rails + Amazon s3 + jquery 文件上传：上传进度条不起作用？答案

【问题标题】：Rails + Amazon s3 + jquery file upload : upload progress bar not working?Rails + Amazon s3 + jquery 文件上传：上传进度条不起作用？
【发布时间】：2012-10-25 21:23:07
【问题描述】：

您好，我目前正在使用 railscasts jquery 文件上传教程的进度条码 (http://railscasts.com/episodes/381-jquery-file-upload)，在添加 Amazon S3 之前它运行良好。我只使用没有 UI 的 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>

应用程序.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

【问题讨论】：

标签： ruby-on-rails

【解决方案1】：

如果有帮助，我写了一个教程：http://pjambet.github.com/blog/direct-upload-to-s3/，还有一个现场演示：http://direct-upload.herokuapp.com/photos 代码托管在 github 上：https://github.com/pjambet/direct-upload

【讨论】：

你好 Pjam，我刚刚浏览了你的教程和演示，但它不允许我一次上传多个文件，对吗？
嗨，在我的教程中，我没有使用多个选项。但据我所知，只需将multiple 添加到文件输入中，您就可以上传多个文件。然后你需要做更多的工作来处理这些文件，但你应该能够做到。如果您需要更多详细信息，请告诉我

【解决方案2】：

Ryan 错过了一件事，告诉你必须在你的 css 文件中添加一个样式，如果你查看他的代码，你会在他的 painting.css 文件中找到以下样式。

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

【讨论】：