Question

以下页面成功使用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"

Answer 1

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

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

Answer 2

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

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

来自this resource

JS

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

rails - 当通过ajax呈现表单时，jquery文件上传器无法正常工作

2 个答案: