对使用Paperclip上传处理AJAX文件的Rails 4感到困惑

Question

在我的html视图代码中,我有两种不同的形式,但共享相同的id名称

<div class="editcompanyprofile_tab" style="display:block;">
<div class="inputfield-container clearfix">
  <%= form_for(@company, remote: true) do |f| %>
  <div class="inputfield_row clearfix">
    <div class="field" style ="width: 125px;">
      <%= f.label :name, "Company Name" %>
    </div>
    <div class="inputfield">
      <%= f.text_field :name, :style => "width: 259px;" %>
    </div>
  </div>
  <div class="inputfield_row clearfix">
    <div class="field" style ="width: 125px;">
      <%= f.label :firstname, "First Name" %>
    </div>
    <div class="inputfield">
      <%= f.text_field :firstname, :style =>"width: 259px;" %>
    </div>
  </div>
  <div class="inputfield_row clearfix">
    <div class="field" style ="width: 125px;">
      <%= f.label :lastname, "Last Name" %>
    </div>
    <div class="inputfield">
      <%= f.text_field :lastname, :style =>"width: 259px;" %>
    </div>
  </div>
  <div class="inputfield_row clearfix">
    <div class="field" style ="width: 125px;">
      <%= f.label :title, "Title"%>
    </div>
    <div class="inputfield">

      <%= f.text_field :title, :style =>"width: 259px;"%>
    </div>
  </div>
  <div class="inputfield_row clearfix">
    <div class="field" style ="width: 125px;">
      <%= f.label :email, "Email" %>
    </div>
    <div class="inputfield">
      <%= f.text_field :email, :style =>"width: 259px;" %>
    </div>
  </div>
  <div class="inputfield_row clearfix">
    <div class="field" style ="width: 125px;">
      <%= f.label :phonenumber, "Work Number" %>
    </div>
    <div class="inputfield">
      <%= f.text_field :phonenumber, :style =>"width: 259px;" %>
    </div>
  </div>
  <div class="inputfield_row clearfix" >

    <div class="field" style="width: 40px;">
      <%= f.label :faxnumber, "Fax"%>
    </div>
    <div class="inputfield" >
      <%= f.text_field :faxnumber, :style=>"width: 134px; margin-right: 5px;"%>
    </div>
    <div class="field" style="width: 60px;">
      <%= f.label :mobile, "Mobile"%>
    </div>
    <div class="inputfield">
      <%= f.text_field :mobile, :style=>"width: 129px;"%>
    </div>
  </div>
  <div class="inputfield_row clearfix">
    <div class="field" style ="width: 125px;">
      <%= f.label :streetaddress, "Street Address"%>
    </div>
    <div class="inputfield">
      <%= f.text_field :streetaddress, :style=>"width: 259px;" %>
    </div>
  </div>
  <div class="inputfield_row clearfix">
    <div class="field" style="width: 40px;">
      <%= f.label :city, "City" %>
    </div>
    <div class="inputfield" >
      <%= f.text_field :city, :style =>"width: 134px; margin-right:5px;"%>
    </div>
    <div class="field" style="width: 60px;">
      <%= f.label :state, "State"%>
    </div>
    <div class="inputfield">
      <%= f.text_field :state, :style=>"width: 129px;" %>
    </div>
  </div>
  <div class="inputfield_row clearfix">
    <div class="inputfield">
      <%= f.text_area :notes, :placeholder =>'Notes' %>
    </div>
  </div>
  <div class="inputfield_buttons">
    <div class="inputaction_hc savechanges" style="margin-right:0; width:120px;">
      <%= f.submit "Save Changes", :name =>"SAVE", :value =>"Save Changes", :style=>"float: left;" %>
    </div>
    <div class="inputaction_hc cancel">
      <input type="button" name="CANCEL" value="Cancel" onclick="hideDiv('editcompanyprofile-menu');" style="float: left;">
    </div>
  </div>
  <% end %>

</div>
</div>

<div class="logodesign_tab" style="display:none;">
    <%= image_tag @company.logo.url(:thumb) %>
    <%= form_for(@company, :remote=>true, :html => { :multipart => true }) do |form| %>
        <%= form.file_field :logo, :class=>"button" %>
        <%= form.submit "Submit", :name =>"SAVE", :value =>"Submit" %>
        <input type="button" name="CANCEL" value="Cancel" onclick="hideDiv('editcompanyprofile-menu');">
    <% end %>
</div>

在我的控制器中,这段代码将执行更新操作

def update
  respond_to do |format|
    if @company.update(company_params)
      format.html { redirect_to @company, notice: 'Company was successfully updated.' }
      format.json { head :no_content }
    else
      format.html { render action: 'edit' }
      format.json { render json: @company.errors, status: :unprocessable_entity }
    end
  end
end

JS Ajax代码

$("form[id^=edit_company]").on("ajax:success", function(e, data, status, xhr){
      alert('ajax succeeded!');
      window.location.reload(true);
});

在editcompanyprofile_tab div标签下,当我编辑公司的任何字段并保存更改时,上面的js ajax代码将被执行并触发警报消息.但是对于logodesign_tab div标签,当我上传徽标图像并保存更改时,上面相同的ajax代码没有被执行!! 因此,警报消息没有弹出.

这真是令人费解,因为这两个表单都共享相同的id,即id ^ = edit_company,那么editcompanyprofile_tab的表单如何工作,而不是logondesign的表单???? 我在这里错过了什么？!？!？

Answer 1

不幸的是,您无法上传文件remote: true.AJAX上传不适用于文件,至少不是默认方式.

可能的解决方案:

1. Remotipart宝石
2. HTML5 Formdata对象
3. JQuery文件上传

看看这个问题:如何使用jQuery异步上传文件？

2015年1月更新:

有一个名为Refile的新gem ,它使异步文件上传变得更加容易.GoRails.com上还有一个很好的介绍视频:带有Refile的文件上传