javascript - 对 Rails 4 如何使用 Paperclip 处理 AJAX 文件上传感到困惑

Question

在我的html View 代码 中，我有两个不同的表单但共享相同的 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>

在我的 Controller 中，这段代码将执行更新操作

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 标签，当我上传 Logo 图像并保存更改时，上面相同的 ajax 代码没有被执行!!因此警报消息没有弹出。

这真的很令人费解，因为这两个表单共享相同的 ID，即 id^=edit_company 那么为什么 editcompanyprofile_tab 的表单有效但 logondesign 的表单无效？？？？我在这里错过了什么？!？!？

Answer 1

很遗憾，您无法使用 remote: true 上传文件。 AJAX 上传不适用于文件，至少在默认方式下是这样。

可能的解决方案:

1. Remotipart Gem
2. HTML5 Formdata Object
3. JQuery File-Upload

看看这个问题:How can I upload files asynchronously with jQuery?

01/2015 更新:

有一个名为 Refile 的新 gem ，这使得异步文件上传更加容易。 GoRails.com 上还有一个很好的介绍视频:File Uploads with Refile