Question

我正在尝试使用jquery文件上传gem在cloudinary上传我的图像。

我按照本教程使用attachinary执行此操作，但我认为要么我缺少某些东西，要么教程不完整，因为在完成后，我确实得到了一个带有按钮的表单，可以在cloudinary上传多个图像但jquery文件上传带有进度条的UI没有显示，我只有一个简单的按钮，选择文件作为标签。

请帮助我了解我哪里出错了以及如何使用进度条获取jQuery文件上传宝石的这个ui。

我遵循的教程是 https://github.com/assembler/attachinary

这是我的文件

/*routes.rb*/
Rails.application.routes.draw do


  root 'prime_petz#home'

  get 'prime_petz/home'

  get 'prime_petz/about'

  get 'prime_petz/contact'

  resources :listings
  mount Attachinary::Engine => "/attachinary"
end

/ Listing.rb /

class Listing < ActiveRecord::Base
    has_attachments :photos, maximum: 10
end

/ 的application.js /

//= require jquery
//= require jquery_ujs
//= require turbolinks
// Loads all Semantic javascripts
//= require semantic-ui
//= require jquery-fileupload
//= require jquery-fileupload/vendor/tmpl
//= require cloudinary/jquery.cloudinary


//= require attachinary
//= require_tree

/ new.html.erb /

<%=form_for @listing, :html=> { class:'ui form centered black segment' } do |f|%>
<div class="field">
    <%= f.attachinary_file_field :photos,class:'ui button gallery' %>
  </div>
<%end%>

/ 的Gemfile /

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.1'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer',  platforms: :ruby

# Use jquery as the JavaScript library
gem 'cloudinary'
gem 'jquery-ui-rails'
gem 'attachinary'
gem 'jquery-rails'
gem "jquery-fileupload-rails"
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0',          group: :doc

gem 'semantic-ui-sass', github: 'doabit/semantic-ui-sass', branch: 'v1.0beta'


# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Use debugger
# gem 'debugger', group: [:development, :test]

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin]

/ listing.js.coffee /

jQuery ->

$('#new_listing').fileupload
dataType:"script"
add: (e, data) ->
data.context = $(tmpl("template-upload", data.files[0]))
$('#new_listing').append(data.context)

progress: (e, data) ->
if data.context
    progress = parseInt(data.loaded / data.total * 100, 10)
    data.context.find('.bar').css('width', progress + '%')

有了这个，我能够查看的只是一个简单的ChooseFiles按钮。

Answer 1

您是否确保在表单视图中包含以下jQuery代码？

$('.attachinary-input').attachinary();

Answer 2

根据附件自述，

Attachinary jquery插件基于jQuery文件上传插件，但没有任何花哨的UI（它让你自己去装饰它）。

使用cloudinary（attachinary）与rails以及jQuery文件上传

2 个答案: