加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

ruby-on-rails – Rails亚马逊s3 jquery文件上传:上传进度条不

发布时间:2020-12-17 03:22:19 所属栏目:百科 来源:网络整理
导读:嗨我目前正在使用railscasts jquery文件上传教程的进度条码( http://railscasts.com/episodes/381-jquery-file-upload),并且在添加Amazon S3之前它运行正常.我只使用没有UI的基本版本的jquery文件上传. 酒吧出现了,但它只是一个空的灰色条(尽管图片完全上传)
嗨我目前正在使用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>

的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

解决方法

如果它可以提供帮助,我写了一个关于它的教程: http://pjambet.github.com/blog/direct-upload-to-s3/,并且有一个现场演示: http://direct-upload.herokuapp.com/photos代码托管在github上: https://github.com/pjambet/direct-upload

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读