Javascript DropzoneJS和Rails 4-几乎在那里，但我'；我仍然缺少关键的部分

我正在尝试在我的Rails 4应用程序中实现Dropzone.js。我把小盒子打开了，但其他的似乎都没用。虽然我知道这对这里的某些人来说可能是小菜一碟，但我已经花了大约两天的时间试图弄明白这一点

以下是我迄今为止所做的工作：

增加：

gem 'dropzonejs-rails'

添加到application.js：

//= require dropzone

Application.scss

 *= require dropzone/dropzone

这是我想要Dropzone.JS的表单：

到目前为止，我在表格页面上的内容：

框出现，但拖放或任何其他功能都不起作用

附加信息：我正在使用回形针，我希望能够上传和保存多个图像到我的每一篇文章

我不确定这是否必要，但是

Post.rb：

post_controller.js

class PostsController < ApplicationController
before_action :find_posts, only: [:show, :edit, :update, :destroy, :upvote, :downvote]
before_action :authenticate_user!, except: [:index, :show, :home]

def home
end

def index
    if params[:category].blank?
        @posts = Post.all.order("created_at DESC")
    else
        @category_id = Category.find_by(name: params[:category]).id  
        @posts = Post.where(category_id: @category_id).order("created_at DESC")
    end
end

def show
    @inquiries = Inquiry.where(post_id: @post).order("created_at DESC")
    @random_post = Post.where.not(id: @post).order("RANDOM()").first
end

def new
    @post = current_user.posts.build
end

def create
    @post = current_user.posts.build(post_params)
    if @post.save 
        redirect_to @post 
    else 
        render 'new'
    end
end

def edit
end

def update
    if @post.update(post_params)
        redirect_to @post 
    else
        render 'edit'
    end
end

def destroy
    @post.destroy
    redirect_to root_path
end

def upvote
    @post.upvote_by current_user
    redirect_to @post
end

def downvote
    @post.downvote_by current_user
    redirect_to @post
end

private 
def find_posts 
    @post = Post.find(params[:id])
end

def post_params
    params.require(:post).permit(:title, :price, :description, :location, :category_name, :contact_number, :image)
end

class PostsController

结束

我需要什么帮助：

实现Dropzone.JS，这样我就可以将多个图像上传到我的post_表单，并将其显示在我的post show页面上

提前谢谢你

---

更新：

这就是出现的情况：

基于，您应该将类dropzone放在表单元素上，而不是文件上载元素上。在此之后，DropzoneJS将查找所有文件输入，并在表单中对其进行更改

因此，将表单生成行更改为

= simple_form_for @Post, html: { multipart: true } do |f|

到

基于，您应该将类dropzone放在表单元素上，而不是文件上载元素上。在此之后，DropzoneJS将查找所有文件输入，并在表单中对其进行更改

因此，将表单生成行更改为

= simple_form_for @Post, html: { multipart: true } do |f|

到

---

@Loi Huynh:嗨，Loi！您可以在此网站上看到示例：

我在更新嵌套表单时遇到问题。。。如果你想让我们讨论这个问题。 这是我的代码：

<%= form_for(@product, html: {class: "dropzone", multipart: true}) do |f| %>
<div id="previews" class="dropzone-previews">
 <div class="dz-default dz-message" align="center">
   <span class="btn btn-primary">Click vào đây để thêm Ảnh</span>
 </div>
</div>
<div class="col-md-4 col-md-offset-4" align="center">
  <br/>
  <div class="actions">
    <%= f.submit "Hoàn Tất", id: "submit-all", class: "btn btn-primary btn-sm" %>
    <%= link_to 'Quay về', products_path, class: "btn btn-primary btn-sm" %>
  </div>
</div>

结束

还有我的upload.js

$（“.dropzone”）.dropzone({

---

}))

@Loi Huynh:嗨，Loi！您可以在此网站上看到示例：

我在更新嵌套表单时遇到问题。。。如果你想让我们讨论这个问题。 这是我的代码：

<%= form_for(@product, html: {class: "dropzone", multipart: true}) do |f| %>
<div id="previews" class="dropzone-previews">
 <div class="dz-default dz-message" align="center">
   <span class="btn btn-primary">Click vào đây để thêm Ảnh</span>
 </div>
</div>
<div class="col-md-4 col-md-offset-4" align="center">
  <br/>
  <div class="actions">
    <%= f.submit "Hoàn Tất", id: "submit-all", class: "btn btn-primary btn-sm" %>
    <%= link_to 'Quay về', products_path, class: "btn btn-primary btn-sm" %>
  </div>
</div>

结束

还有我的upload.js

$（“.dropzone”）.dropzone({

---

}))

请使用堆栈溢出自己的代码段，而不是外部图像。这使问题更容易理解，特别是如果有人不习惯阅读像你这样的黑色主题。请使用堆栈溢出自己的代码片段，而不是外部图像。它使问题更容易阅读，特别是如果有人不习惯阅读像你这样的黑色主题，这就让拖放工作变得有效。现在它说我缺少模板。我知道这与Json有关，你能给我指出正确的方向吗？在我的控制器中要更改什么？它什么时候会这样说？单击表单上的“提交”按钮后？这可能意味着您缺少查看

posts/show

，因为您的create方法中有

重定向到@post

。一般来说，这应该是它自己的问题，因为它已经不在这个问题的范围之内了。不，这不是问题所在。这与JSON有关，因为dropzone需要JSON。我只是不确定如何将JSON添加到我的控制器中。我一直在看电视，所以这不是问题所在。然后我的问题还在等待答案：“什么时候它会这么说？”？提交之后还是什么时候？目前还没有足够的信息来解决这个问题。正如我前面提到的，你应该提出一个关于这个问题的单独问题，并接受这个答案，因为它解决了DropzoneJS不显示的原始问题。您看到的问题是，因为您没有用于

posts/show

的JSON模板，所以请创建一个包含

JSON.extract这样内容的
posts/show.JSON.jbuilder
@post，：id，：title

。这使拖放工作得以进行。现在它说我缺少模板。我知道这与Json有关，你能给我指出正确的方向吗？在我的控制器中要更改什么？它什么时候会这样说？单击表单上的“提交”按钮后？这可能意味着您缺少查看

posts/show

，因为您的create方法中有

重定向到@post

。一般来说，这应该是它自己的问题，因为它已经不在这个问题的范围之内了。不，这不是问题所在。这与JSON有关，因为dropzone需要JSON。我只是不确定如何将JSON添加到我的控制器中。我一直在看电视，所以这不是问题所在。然后我的问题还在等待答案：“什么时候它会这么说？”？提交之后还是什么时候？根本没有足够的信息来解决这个问题。正如我前面提到的，你应该

autoProcessQueue : false,
paramName: "product[photos_attributes][][image]",
previewsContainer: "#previews",
init: function() {
  var myDropzone = this;
  this.element.querySelector("#submit-all").addEventListener("click", function(e) {
      e.preventDefault();
      e.stopPropagation();
      myDropzone.processQueue();
  });
 },