解决方案

Question

我正在使用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'

create.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不起作用，即使我只提醒（'帮助'）;在我的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

.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'

Answer 1

使用

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

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

Answer 2

有几个问题。

#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。

我还强烈建议您使用responders gem，它会大量清理您的代码。

-

如果您想自己创建一个新的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) %>");

默认情况下，通过调用_[collection_singular_name].html.erb Rails handles "collections" - 在您的情况下_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（您可以sign up for free只是一个测试应用）：

您的代码结构看起来没问题，只有控制器＆amp; 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 %>

Answer 3

让ajax文件上传到jquery-file-upload gem

您必须在表单中添加:html => { :multipart => true}

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

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

ajax没有响应 - create.js.erb

3 个答案:

解决方案