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

时间:2022-12-09 19:44:13

I'm using the jQuery Form Plugin on a big ass form which includes some file fields. The back end is Ruby on Rails.

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

I'm having trouble getting Rails to recognize the POST request type to be 'text/javascript' even though I believe I am setting it correctly.

我无法让Rails将POST请求类型识别为'text / javascript',即使我相信我正确设置它。

The form looks like:

表格如下:

<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

The js looks like:

js看起来像:

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

And I also have declared:

我也宣布:

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

The request makes it to the controller, but the Rails respond_to block sees it as a normal html request. Also, Firebug shows a parser error and fails to display the request and response headers in the console.

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

If I remove the file field and POST the text fields only, the respond_to block handles the request as a js request and properly executes the create.js.erb file.

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

How can I get Rails to properly respond to the request? Thanks.

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

2 个解决方案

#1


4  

Due to JavaScript security limitations it is impossible to send forms with (non-empty) file fields via XHR. The usual workaround is to "fake" ajax form submission by posting to a hidden iframe. I believe that is also what jQuery Form plugin does.

由于JavaScript安全限制,无法通过XHR发送带有(非空)文件字段的表单。通常的解决方法是通过发布到隐藏的iframe来“假冒”ajax表单提交。我相信这也是jQuery Form插件的功能。

One way of making Rails treat these "fake" ajax form submissions as actual XHR requests would be adding a special parameter in jQuery Form plugin's beforeSubmit callback:

一种使Rails处理这些“假”ajax表单提交的方法,因为实际的XHR请求将在jQuery Form插件的beforeSubmit回调中添加一个特殊参数:

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

Then in your controller use a before filter to set format of the request to :js when posted data contains the special parameter:

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

before_filter :set_ajax_request

# ...

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

Your respond_to method should now work as expected.

您的respond_to方法现在应该按预期工作。

#2


2  

If you're using Rails 3, try the Remotipart gem. It makes AJAX style file uploads relatively painless.

如果您使用的是Rails 3,请尝试Remotipart gem。它使AJAX样式文件上传相对轻松。

http://rubygems.org/gems/remotipart

http://github.com/leppert/remotipart

#1


4  

Due to JavaScript security limitations it is impossible to send forms with (non-empty) file fields via XHR. The usual workaround is to "fake" ajax form submission by posting to a hidden iframe. I believe that is also what jQuery Form plugin does.

由于JavaScript安全限制,无法通过XHR发送带有(非空)文件字段的表单。通常的解决方法是通过发布到隐藏的iframe来“假冒”ajax表单提交。我相信这也是jQuery Form插件的功能。

One way of making Rails treat these "fake" ajax form submissions as actual XHR requests would be adding a special parameter in jQuery Form plugin's beforeSubmit callback:

一种使Rails处理这些“假”ajax表单提交的方法,因为实际的XHR请求将在jQuery Form插件的beforeSubmit回调中添加一个特殊参数:

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

Then in your controller use a before filter to set format of the request to :js when posted data contains the special parameter:

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

before_filter :set_ajax_request

# ...

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

Your respond_to method should now work as expected.

您的respond_to方法现在应该按预期工作。

#2


2  

If you're using Rails 3, try the Remotipart gem. It makes AJAX style file uploads relatively painless.

如果您使用的是Rails 3,请尝试Remotipart gem。它使AJAX样式文件上传相对轻松。

http://rubygems.org/gems/remotipart

http://github.com/leppert/remotipart