Question

在My Rails应用程序中，我需要用户能够发布始终包含文本和可选图像的Facebook样式的帖子。我需要在没有页面重新加载的情况下进行此操作。

由于我想使用Dropzone.js管理异步图片上传，我一直试图将我的表单与Dropzone结合起来但没有成功。我主要使用this source。

我在这里有点迷失。我尝试过的是下面的内容。你能指出我正确的方向吗？

我的表单

    <%= simple_form_for(@post, remote: true, :authenticity_token => true, html: { multipart: true, class: 'form-inline dropzone', id: 'new_post_form'}) do |f| %>
        <div class="dropzone-previews"></div>
        <%= f.input :content, :label => false, :placeholder => "   Say something here!", as: :text, :required => true, :autofocus => true, :input_html => { id: "new_post_content_field" } %>
        <%= f.input :poster_id, :as => :hidden, :required => true, :autofocus => true, input_html: {value: current_user.id } %>
        <%= f.input :poster_type, :as => :hidden, :required => true, :autofocus => true, input_html: {value: current_user.class } %>
        <%= f.input :community_id, :as => :hidden, :required => true, :autofocus => true, input_html: {value: @community.id } %>
        <div class="fallback">
          <%= f.input :post_image, :label => false %>
        </div>
        <%= f.button :submit, input_html: {id: 'submit-all' }  %>
<% end %>

生成的HTML

<form class="simple_form form-inline dropzone dz-clickable" id="new_post_form" novalidate="novalidate" enctype="multipart/form-data" action="/posts" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="3OC6YhVKtCvjXk0QIHQUUG+72PtkkN3NieWvtLmYzitsh2vDvhu2ggPJBcbDII+39CHuFaRqdRHXK27eR6W1Bw==">

        <div class="dropzone-previews"></div>
        <div class="form-group text required post_content"><textarea class="form-control text required" id="new_post_content_field" autofocus="autofocus" required="required" aria-required="true" placeholder="   Say something here!" name="post[content]"></textarea></div>
        <div class="form-group hidden post_poster_id"><input class="form-control hidden" value="2" autofocus="autofocus" required="required" aria-required="true" type="hidden" name="post[poster_id]" id="post_poster_id"></div>
        <div class="form-group hidden post_poster_type"><input class="form-control hidden" value="Participant" autofocus="autofocus" required="required" aria-required="true" type="hidden" name="post[poster_type]" id="post_poster_type"></div>
        <div class="form-group hidden post_community_id"><input class="form-control hidden" value="1" autofocus="autofocus" required="required" aria-required="true" type="hidden" name="post[community_id]" id="post_community_id"></div>

        <input type="submit" name="commit" value="Create Post" input_html="{:id=>&quot;submit-all&quot;}" class="btn btn-default" data-disable-with="Create Post">
<div class="dz-default dz-message"><span>Drop files here to upload</span></div></form>

的application.js

Dropzone.options.newPostForm = { 
  autoProcessQueue: false,
  uploadMultiple: true,
  parallelUploads: 100,
  maxFiles: 100,
  paramName: "post[post_image]",


  init: function() {
    var myDropzone = this;

    $("#submit-all").click(function (e) {
         e.preventDefault();
         e.stopPropagation();
         myDropzone.processQueue();
     });
  }
}

在帖子控制器中创建操作

  def create
    @post = Post.new(post_params)
    respond_to do |format|
      if @post.save
        @post_comment = Comment.new()
        format.js
        format.json { render json: { message: "success", fileID: @post.id }, :status => 200 }
      else
        format.js {render inline: "toastr.error('Something went wrong');"}
        format.jsnon { render json: { error: @post.errors.full_messages.join(',')}, :status => 400 }
        end
      end
    end

目前，如果我点击提交＆＃39;我得到了流动的参数

<ActionController::Parameters {"utf8"=>"✓", "authenticity_token"=>"3OC6YhVKtCvjXk0QIHQUUG+72PtkkN3NieWvtLmYzitsh2vDvhu2ggPJBcbDII+39CHuFaRqdRHXK27eR6W1Bw==", "post"=>{"content"=>"ddddddd", "poster_id"=>"2", "poster_type"=>"Participant", "community_id"=>"1"}, "commit"=>"Create Post", "controller"=>"posts", "action"=>"create"} permitted: false>

所以似乎没有与图像相关的参数被发送到控制器，我不知道如何解决这个问题。

Answer 1

我最终找到了问题所在。

图像的输入字段（如下）不应包含在表单助手

中

<%= f.input :post_image, :label => false %>

我在设置提交按钮的ID时出错了。我正在使用：

<%= f.button :submit, input_html: {id: 'submit-all' }  %>

而不是：

<%= f.button :submit, id: 'submit-all'   %>

这阻止了JS选择适当的表单按钮。

无法将普通表单与Dropzone.js结合使用

1 个答案: