目前，我有几种可以使用嵌套属性的表单。我最近发现了 Dropzone JS，所以我想以我正在使用的各种形式来实现它。
我有两个类似的模型：
Games
class Games < ActiveRecord::base
has_many :screenshots, dependent: :destroy
accepts_nested_attributes_for :screenshots, allow_destroy: true
end
截图
class Screenshot < ActiveRecord::Base
belongs_to :game
mount_uploader :ssfile, ScreenshotUploader
end
通常，我会用这样的方式处理它：
新的.html.haml
- content_for :breadcrumbs do
%h3.text-center New Game
.col-md-12#content
.row
= render 'form'
.row
.col-md-12
= link_to 'Back', games_path
_form.html.haml
.col-md-12
= form_for @game, :html => {:class => 'form-horizontal form-bordered'} do |f|
.section-title
%h3 General Data
.well
.form-group
=f.label :title, :class => 'col-md-2'
.col-md-6
= f.text_field :title, :class => 'form-control'
.form-group
= f.label :platform, :class => 'col-md-2'
.col-md-6
.input-group
= f.text_field :platform, :class => 'form-control'
.section-title
%h3 Screenshots
.well#screenshots
=f.fields_for :screenshots do |i|
=render 'screenshot_fields', :f => i
%hr
.links
=link_to_add_association 'Add Screenshot', f, :screenshots, :class => 'btn btn-default'
.row
.col-md-12
.actions
= f.submit 'Save', :class => 'btn btn-default'
_screenshot_fields.html.haml
.form-group
-if f.object.ssfile?
.col-md-2
=image_tag(f.object.ssfile_url(:thumb))
.col-md-4
%p
=f.file_field :ssfile, :class => 'styledfileinput'
-if f.object.ssfile?
.col-md-2
%p
=f.check_box :_destroy
=f.label :_destroy, 'Remove'
这很好用。当您单击“添加屏幕截图”时，它会加载link_to_add_associationhelper，它是称为 Cocoon 的宝石的一部分。这个助手将创建必要的 JS 来将代码“块”添加到表单中，在本例中是文件输入，尽管通常您会有更多其他类型的输入，而不仅仅是一种输入。
我想替换添加的块link_to_add_association具有多文件放置区。
我对以下内容进行了更改new.html.haml view:
.col-md-12
= form_for @game, :html => {:class => 'form-horizontal form-bordered', :id => 'gameform'} do |f|
-# *snip*
.well#screenshots
- @game.screenshots.each do |i|
=image_tag i.ssfile_url(:thumb)
%hr
.row
.col-md-12
.actions
= f.submit 'Save', :class => 'btn btn-default'
I added #gameform to the form_for元素，并替换了显示图片的循环。到目前为止，一切都很好。现在的问题是我不知道文件应该如何与表单交互。
我在正在加载 Dropzone 配置的咖啡脚本上有这个：
ready = ->
if $('#gameform').length > 0
didthiswork = new Dropzone("#gameform", {
paramName: "game[screenshot_attributes][ssfile]"
})
else
console.log('ruh roh')
$(document).on('page:load ready', ready)
现在，我可以单击表单中的任意位置，它将带来上传对话框（这本身就是另一个问题），但是一旦我选择了图片，这些图片就无法正确保存。有没有办法让它工作fields_for？我有很多其他表单使用非常相似的配置，因此我更希望不必更改应用程序的整个逻辑（如果可能）。
UPDATE
我想我已经取得了一些进步。我已经设法让表单发送数据，但是它们没有按照我的预期到达。
我使用此链接中的信息调整了配置：https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone
在我的咖啡脚本上产生这样的结果：
Dropzone.options.articuloform =
autoProcessQueue: false
uploadMultiple: true
paramName: "game[screenshot_attributes][ssfile]"
parallelUploads: 100
maxFiles: 100
init: ->
myDropzone = this
# First change the button to actually tell Dropzone to process the queue.
@element.querySelector('input[type=submit]').addEventListener 'click', (e) ->
# Make sure that the form isn't actually being sent.
e.preventDefault()
e.stopPropagation()
myDropzone.processQueue()
return
# Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
# of the sending event because uploadMultiple is set to true.
@on 'sendingmultiple', ->
# Gets triggered when the form is actually being sent.
# Hide the success button or the complete form.
return
@on 'successmultiple', (files, response) ->
# Gets triggered when the files have successfully been sent.
# Redirect user or notify of success.
return
@on 'errormultiple', (files, response) ->
# Gets triggered when there was an error sending the files.
# Maybe show form again, and notify user of error
return
return
这可以防止当我选择图像时自动上传数据（这很棒），但是，一旦我按下“提交”按钮，数据就会以错误的结构到达。他们在来源数据中是这样到达的：
Parameters: {
"utf8"=>"✓",
"authenticity_token"=>"l2siCG2D4xW0eto48WM152MTusc6K5cQYem8K2a9c/Y=",
"game"=>{
"title"=>"Super Amazing AAA Title",
"platform"=>"Xbox One",
"screenshot_attributes"=>{
"ssfile"=>{
"0"=>#<ActionDispatch::Http::UploadedFile:0x000000055c7e98 @tempfile=#<Tempfile:/tmp/RackMultipart20150408-9276-14rfzqm>,
@original_filename="screenshot01.png",
@content_type="image/png",
@headers="Content-Disposition: form-data; name=\"game[screenshot_attributes][ssfile][0]\"; filename=\"screenshot01.png\"\r\nContent-Type: image/png\r\n">,
"1"=>#<ActionDispatch::Http::UploadedFile:0x000000055c7df8 @tempfile=#<Tempfile:/tmp/RackMultipart20150408-9276-1opclgk>,
@original_filename="screenshot02.png",
@content_type="image/png",
@headers="Content-Disposition: form-data; name=\"game[screenshot_attributes][ssfile][1]\"; filename=\"screenshot02.png\"\r\nContent-Type: image/png\r\n">,
"2"=>#<ActionDispatch::Http::UploadedFile:0x000000055c7d30 @tempfile=#<Tempfile:/tmp/RackMultipart20150408-9276-16r4kdq>,
@original_filename="screenshot03.png",
@content_type="image/png",
@headers="Content-Disposition: form-data; name=\"game[screenshot_attributes][ssfile][2]\"; filename=\"screenshot03.png\"\r\nContent-Type: image/png\r\n">,
"3"=>#<ActionDispatch::Http::UploadedFile:0x000000055c7c90 @tempfile=#<Tempfile:/tmp/RackMultipart20150408-9276-qp1au3>,
@original_filename="screenshot04.png",
@content_type="image/png",
@headers="Content-Disposition: form-data; name=\"game[screenshot_attributes][ssfile][3]\"; filename=\"screenshot04.png\"\r\nContent-Type: image/png\r\n">,
"4"=>#<ActionDispatch::Http::UploadedFile:0x000000055c7ba0 @tempfile=#<Tempfile:/tmp/RackMultipart20150408-9276-8g3pap>,
@original_filename="screenshot05.png",
@content_type="image/png",
@headers="Content-Disposition: form-data; name=\"game[screenshot_attributes][ssfile][4]\"; filename=\"screenshot05.png\"\r\nContent-Type: image/png\r\n">
}
}
},
"null"=>"",
"commit"=>"Save",
"id"=>"2"
}
重要的部分是在name每个部分的到达时间为game[screenshot_attributes][ssfile][XXXX]这是错误的，正确的格式应该是game[screenshot_attributes][XXXX][ssfile]。我可以在上面粘贴的部分中进行配置，但重要的部分是paramName部分，我有paramName: "game[screenshot_attributes][ssfile]".
如果有人能提供任何线索，我将不胜感激。
