rails - 通过ajax呈现表单时，jquery文件上传器不起作用答案

【问题标题】：rails - jquery file uploader not working when form is rendered via ajaxrails - 通过ajax呈现表单时，jquery文件上传器不起作用
【发布时间】：2014-01-14 19:49:30
【问题描述】：

以下页面成功使用ajax和jquery-file-uploader上传图片：

<%= javascript_include_tag "/assets/jquery.js" %>
<%= javascript_include_tag "/assets/jquery_ujs.js" %>
<%= javascript_include_tag "/assets/jquery-fileupload/jquery.iframe-transport.js" %>
<%= javascript_include_tag "/assets/jquery-fileupload/jquery.fileupload.js" %>
<%= javascript_include_tag "/assets/jquery-fileupload/basic.js" %>
<%= javascript_include_tag "/assets/jquery-fileupload/vendor/tmpl.js" %>
<%= javascript_include_tag "/assets/profiles.js" %>

<%= form_for @profile, :html => {:id => "the_form", :multipart => true}, 
    :authenticity_token => true, remote: true  do |f| %>
         <%= f.file_field :pic,  :id => "filer", :multiple => true %>
<% end %>

但是，我现在正在尝试通过 ajax 呈现表单。因此，用户转到页面，单击“显示表单”按钮，然后 ajax 将表单呈现在页面上。当我这样做时，表单不再有效。当有人选择一个文件时，服务器不做任何事情。我尝试添加一个提交按钮，但由于某些奇怪的原因，请求以 html 格式而不是 ajax 提交。如何让 jquery-file-uploader 使用 ajax 呈现的表单？

这是最终的 javascript_include_tag 调用的咖啡脚本文件：

jQuery ->
  $('#the_form').fileupload
    dataType: "script"

【问题讨论】：

标签： ruby-on-rails jquery carrierwave jquery-file-upload

【解决方案1】：

您正在使用 Ajax 加载表单，我认为您的 fileupload 函数未绑定到您的 DOM 元素。这是 Ajax 的常见问题，可以通过将绑定委托给 document 而不是专门的对象来解决：

$('document').fileupload(
    'option',
    'fileInput',
    $('input:file')
);

来自this resource

真正的问题是 JQuery / Javascript 在页面加载时执行其元素绑定。这意味着如果您的元素最初没有加载，那么 JS 就不存在它。解决这个问题的方法是绑定到文档或另一个容器，并委托给它的孩子

【讨论】：

【解决方案2】：

你一定要看看这个http://os.alfajango.com/remotipart/

因为 rails 不支持 ajax 文件上传，但是使用这个 gem 你可以实现它。

【讨论】：