Question

我有一个可以有一个图像的模型对象。当我创建新对象时，我希望能够使用Dropzone.js拖放新图像。模型对象也有其他属性，如名称等。因此表单有多个字段。我想要一些看起来像这样的东西：

 Name *:
 ------------------------ 
 I                       I
 ------------------------

Image:

---------------------------------
I                               I
I          Dropzone             I
I                               I
---------------------------------

                           Submit

我使用Boostrap JS modal呈现表单。我正在努力按照我的要求（或根本没有）提供放置区域。我的表单目前看起来像这样（我使用HAML）：

= form_for @idea, remote: remote, html: {role: :form, "data-model" => 'idea', multipart: true}  do |f|

.form-group
  = f.label :name, "Title", :class => "required"
  = f.text_field :name, :class => "form-control"

# I have tried to create a form within the form (in some different ways), but I'm not sure if this is the correct approach...

%form{class: "dropzone"}
  .fallback
    = f.file_field :image

现在根本不显示放置区。我已经验证文件已正确安装。如果我将class: "dropzone"添加到form_for行，则会显示放置区，但会覆盖整个表单（包括其他字段）。

我使用'dropzonejs-rails'来安装Dropzone。

关于如何实现我想要的效果的任何想法？

更新

生成的表单的相关部分如下所示：

<form accept-charset="UTF-8" action="/ideas" class="new_idea" data-model="idea" data-remote="true" enctype="multipart/form-data" id="new_idea" method="post" role="form">

    <form class='dropzone'></form>
      <div class='fallback'>
        <input id="idea_image" name="idea[image]" type="file" />
      </div>

    <div class='form-group'>
      <input class="btn btn-large btn-primary" name="commit" type="submit" value="Create Idea" />
    </div>
</form>

Answer 1

您可以使用与Dropzone previewsContainer选项的表单不同的容器。例如，您可以使用div并添加dropzone-previews类，如下所示：

= form_for @idea, remote: remote, html: {role: :form, "data-model" => 'idea', multipart: true}  do |f|

  .form-group
    = f.label :name, "Title", :class => "required"
    = f.text_field :name, :class => "form-control"

  .dropzone-previews
    %p.dz-message You can drop an image here or click to upload.

    .fallback
      = f.file_field :image

:javascript
  Dropzone.options.#{@ideas} = {
    previewsContainer: '.dropzone-previews',
    ...
  }

正如Dropzone.js page所述：

previewsContainer定义文件预览的显示位置 - 如果使用Dropzone元素为null。可以是普通的HTMLElement或CSS选择器。该元素应具有dropzone-previews类，以便正确显示预览。

使用Paperclip使用Dropzone.js上传Rails 4文件

1 个答案: