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

Question

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

3

在我的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 的表单无效呢？？？我错过了什么？！?!

- awongCM

如果您将徽标文件字段更换为简单的文本字段，是否有效？ - crispychicken

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- crispychicken · Accepted Answer

很遗憾，在使用 remote: true 时你无法上传文件。AJAX 上传不适用于文件，至少默认方式不支持。

可能的解决方案：

欲了解详细信息，请参考以下问题：如何使用jQuery异步上传文件？

更新0115年:

有一个名为Refile 的新Gem，可以使异步文件上传变得更加容易。在GoRails.com上有一个很好的介绍视频：使用Refile上传文件