我有一个可以有一个图像的模型对象。当我创建新对象时,我希望能够使用 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>
最佳答案
您可以使用与 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 defines where to display the file previews – if null the Dropzone element is used. Can be a plain HTMLElement or a CSS selector. The element should have the dropzone-previews class so the previews are displayed properly.
关于javascript - 使用 Paperclip 使用 Dropzone.js 上传 Rails 4 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25453544/