1

我正在使用 jquery-file-upload-rails gem 在我的表单上上传多个带有预览的图像。文件上传正常，但只有在浏览器刷新后才会呈现带有新照片的部分！也许，有人可以看到，出了什么问题。

我正在调用文件上传器在项目的编辑页面中加载照片图像：

= f.fields_for :photos, Photo.new do |ff|
  = ff.file_field :img_file, multiple: true, name: "project[photos_attributes][][img_file]", id: 'new_photo'

照片控制器：

  def create
    @project = Project.find(params[:project_id])
    @photo = @project.photos.create(params[:photo].permit(:img_file))
    respond_to do |format|
      format.js
      format.html
    end
  end

photos.js.coffee 使 jquery-file-uploader-rails gem 工作：

jQuery ->
  $('#new_photo').fileupload
    dataType: 'script'

创建.js.erb

$('#photos').html("<%= j render(@photo) %>");

_photo.html.haml

.photo
  - @project.photos.each do |photo|
    = image_tag photo.img_file.thumb
    = link_to 'Remove', photo, data: { confirm: "Are you sure?" }, method: :delete

这样我就可以上传照片了。但是我的 ajax 不起作用，即使我只放了 alert('help'); 在我的 create.js.erb 中，它没有响应。我究竟做错了什么？提前谢谢了！

更新 当前情况（在 Rich Peck 的帮助下）：

我的模型：

class Project < ActiveRecord::Base
  has_many :photos, dependent: :destroy
  accepts_nested_attributes_for :photos, allow_destroy: true
end

class Photo < ActiveRecord::Base
  belongs_to :project
  validates :img_file, presence: true
  mount_uploader :img_file, ImageUploader
end

项目负责人：

  def edit
    @project = Project.find(params[:id])
    @project.photos.build
  end

  def update
    @project = Project.find(params[:id])
    @project.update(project_params)
  end

params.require(:project).permit(photos_attributes: [:img_file])

/项目/编辑

  = form_for @project do |f|
    = f.fields_for :photos do |p|
      = p.file_field :img_file, multiple: true, id: 'new_photo'       
  #photos
    = render 'photos/photo'

/照片/_照片

.photo
  = image_tag photo.img_file.thumb if photo.img_file?
  = link_to 'Remove', photo, data: { confirm: "Are you sure?" }, method: :delete

/photos/create.js.erb

$('#photos').html("<%= j render(@photo) %>");

/javascripts/photos.js.coffee

jQuery ->
  $('#new_photo').fileupload
    dataType: 'script'
4

3 回答 3

0

利用

$('#photos').html(escape_javascript("<%= j render(@photo) %>"));

见http://api.rubyonrails.org/classes/ActionView/Helpers/JavaScriptHelper.html#method-i-escape_javascript

于 2016-01-24T10:22:43.867 回答
0

几个问题。

#app/controllers/projects_controller.rb
class ProjectsController < ApplicationController
   respond_to :js, :html

   def new
      @project = Project.new
      @project.photos.build #-> this will replace Photo.new in fields_for
   end

   def create
      @project = Project.new project_params
      @project.save
      respond_with @project
   end

   private

   def project_params
      params.require(:project).permit(photos_attributes: [:img_file])
   end
end 

#app/views/projects/new.haml
= form_for @project do |f|
    = f.fields_for :photos do |ff|
       = ff.file_field :img_file, multiple: true, id: 'new_photo'

使用嵌套属性时，您永远不应该声明name嵌套字段的属性。它不仅违反惯例，而且还为黑客和错误敞开了大门。

如果您正在使用nested attributes，则需要首先传递@project对象，这意味着表单将传递给projects#update或projects#create......不是 photos#create您现在拥有的。

我也强烈推荐使用respondersgem，它会大量清理你的代码。

--

如果您想自己创建一个新Photo对象，您将需要使用以下内容：

#config/routes.rb
resources :projects do
   resources :photos #-> url.com/projects/:project_id/photos/new
end

#app/controllers/photos_controller.rb
class PhotosController < ApplicationController
   respond_to :js, :html

   def new
      @project = Project.find params[:project_id]
      @photo   = @project.photos.new
   end

   def create
      @project = Project.find params[:project_id]
      @photo   = @project.photos.new photo_params
      @photo.save
      respond_with @photo
   end

   private

   def photo_params
      params.require(:photo).permit(:img_file)
   end
end

#app/views/photos/new.haml
= form_for @photo do |f|
   = f.file_field :img_field

您的 JS 代码不正确...

$('#photos').html("<%= j render(@photo) %>");

默认情况下，Rails通过调用- 在您的情况下处理“集合”。它遍历集合以每次都显示这一点。要修复您的问题，只需从部分中删除循环：_[collection_singular_name].html.erb_photo.html.erb

#app/views/photos/_photo.html.erb
= image_tag photo.img_file.thumb
= link_to 'Remove', photo, data: { confirm: "Are you sure?" }, method: :delete

解决方案

决定您是创建一个project还是photo.

如果您正在创建photo，您应该使用单独的photos控制器（如上所述）。如果你正在创建一个新项目，你应该nested attributes正确使用。我们之前使用过JQuery-File-Upload多次（您可以免费注册它只是一个测试应用程序）：

在此处输入图像描述

您的代码结构看起来不错，只有控制器和 JS 有问题。

更新

要通过项目的edit表单添加新照片，只需使用以下内容：

#app/controllers/projects_controller.rb
class ProjectsController < ApplicationController
   def edit
      @project = Project.find params[:id]
      @project.photos.build
   end

   def update
      @project = Project.find params[:id]
      @project.update project_params
   end

   private

   def project_params
      params.require(:project).permit(photos_attributes: [:img_file])
   end
end

#app/views/projects/edit.html.erb
<%= form_for @project do |f| %>
   <%= f.fields_for :photos do |p| %>
      <%= p.file_field :img_file %>
   <% end %>
   <%= f.submit %>
<% end %>
于 2016-01-24T10:45:38.330 回答
0

让 ajax 文件上传在jquery-file-uploadgem中工作

你必须添加 :html => { :multipart => true}到你的表格

<%= form_for Upload.new, :html => { :multipart => true} } do |f| %> ... <%end%>

请参阅jQuery-File-Upload 示例表单以供参考

于 2016-01-24T10:51:15.733 回答