jQuery 表单插件 + Ajax 文件上传 + Rails

Posted 2023-02-24

【中文标题】jQuery 表单插件 + Ajax 文件上传 + Rails

【英文标题】：jQuery Form Plugin + Ajax File Upload + Rails

【发布时间】：2010-12-16 23:30:18

【问题描述】：

我在一个包含一些文件字段的大表单上使用jQuery Form Plugin。后端是 Ruby on Rails。

我无法让 Rails 将 POST 请求类型识别为“文本/javascript”，即使我认为我设置正确。

表格如下：

<form id="listing_form" method="POST" enctype="multipart/form-data" action="/listings">
    <input type="text" size="30" name="listing[venue][phone]" id="listing_venue_phone"/>
    <input type="file" size="30" name="listing[venue][image]" id="listing_venue_image"/>
    ...plus tons of other fields

js看起来像：

$("#listing_form").ajaxForm( dataType: 'script' );

我还声明：

jQuery.ajaxSetup( 
    'beforeSend': function(xhr) xhr.setRequestHeader('Accept', 'text/javascript')
);

请求到达控制器，但 Rails respond_to 块将其视为普通的 html 请求。此外，Firebug 显示解析器错误，无法在控制台中显示请求和响应标头。

如果我删除文件字段并仅发布文本字段，respond_to 块将请求作为 js 请求处理并正确执行 create.js.erb 文件。

如何让 Rails 正确响应请求？谢谢。

【问题讨论】：

jQuery 表单插件的dataType 选项是jQuery 的ajax 方法的dataType 选项的代理。这意味着 XHR 期待一个带有 text/javascript 内容类型的 response。它与发送的内容无关。

感谢您的回复。我得到的那部分，我已经编辑了我的帖子以澄清我的问题。

【参考方案1】：

由于 JavaScript 安全限制，无法通过XHR 发送带有（非空）文件字段的表单。 通常的解决方法是通过发布到隐藏的 iframe 来“伪造”ajax 表单提交。我相信这也是 jQuery Form 插件所做的。

让 Rails 将这些“假”ajax 表单提交视为实际 XHR 请求的一种方法是在 jQuery Form 插件的 beforeSubmit 回调中添加一个特殊参数：

// ...
beforeSubmit: function(data) 
    data.push(name: 'accept_js', value: '1');

// ...

然后，当发布的数据包含特殊参数时，在您的控制器中使用 before 过滤器将请求的格式设置为 :js：

before_filter :set_ajax_request

# ...

private
  def set_ajax_request
    request.format = :js if params[:accept_js] == '1'
  end

您的 respond_to 方法现在应该可以正常工作了。

【讨论】：

您好，感谢您的建议。但是，accept_js 参数在添加到 beforeSubmit 和点击 Rails 应用程序之间消失了。它可能与 iframe hack 有关。现在追踪它...

我关注了截屏视频：blog.edgecase.com/2009/6/15/…，并开始工作。基本上，我在表单中添加了一个 并安装了插件。完美运行。感谢您的建议，它帮助我了解了正在发生的事情并让我朝着正确的方向前进。

【参考方案2】：

如果您使用的是 Rails 3，请尝试使用 Remotipart gem。它使得 AJAX 风格的文件上传相对轻松。

http://rubygems.org/gems/remotipart

http://github.com/leppert/remotipart