Ruby on Rails AJAX 文件上传
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1379204/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ruby on Rails AJAX file upload
提问by Jakub Arnold
Is there any easy way how to handle AJAX file upload in Rails? e.g. with a plugin
有没有什么简单的方法可以在 Rails 中处理 AJAX 文件上传？例如使用插件
回答by leppert
If you're using Rails 3, I've written a plugin that makes AJAX style file uploads relatively trivial to implement.
如果您使用的是 Rails 3，我编写了一个插件，使 AJAX 样式文件上传实现起来相对简单。
回答by Dan Sandland
JQuery File Upload is very active and versatile file upload widget project.
JQuery File Upload 是一个非常活跃和通用的文件上传小部件项目。
See the demo here: http://blueimp.github.com/jQuery-File-Upload/
在此处查看演示：http: //blueimp.github.com/jQuery-File-Upload/
Here's a Gem: http://rubygems.org/gems/jquery.fileupload-rails
这是一个宝石：http: //rubygems.org/gems/jquery.fileupload-rails
The wiki also has Rails examples: https://github.com/blueimp/jQuery-File-Upload/wiki
wiki 也有 Rails 示例：https: //github.com/blueimp/jQuery-File-Upload/wiki
回答by Vladyslav
It's not really necessary to use some special plugins for that. Easiest way to do ajax picture upload for me was just make form that uploading pictures to act like ajax. For that I use ajaxForm jQuery plugin: http://www.malsup.com/jquery/form/Than return to js uploaded picture and put it to your page.
没有必要为此使用一些特殊的插件。对我来说，上传 ajax 图片最简单的方法就是制作上传图片的表单，使其像 ajax 一样。为此，我使用 ajaxForm jQuery 插件：http: //www.malsup.com/jquery/form/返回到 js 上传的图片并将其放入您的页面。
So, you should make your form be ajaxForm:
所以，你应该让你的表单成为 ajaxForm：
$('#uploader').ajaxForm({dataType: "script",
success: ajaxFormErrorHandler,
error: ajaxFormSuccessHandler
}
controler looks like that:
控制器看起来像这样：
def add_photo
@photo = PhotosMeasurement.new(params[:user_photo])
respond_to do |format|
if @photo.save
format.json { render :json => @photo}
else
format.json { render :json => nil}
end
end
end
and in ajaxFormSuccessHandler you simply get picture object:
在 ajaxFormSuccessHandler 中，您只需获取图片对象：
var photo = jQuery.parseJSON(responseText.responseText);
and put photo wherever you like:
并把照片放在任何你喜欢的地方：
target.find('.addPhoto').before(''+
'<input class="imageId" type="hidden" value='+photo.id+' > '+
'<img src='+photo.photo.thumb.url+' alt="Thumb_1"> ');
P.S: Don't really know why but if you return to ajaxForm handler something, it handle that request as ERROR not SUCCESS.
PS：不知道为什么，但如果你返回 ajaxForm 处理程序，它会将该请求处理为 ERROR not SUCCESS。
P.P.S: surely jQuery-File-Upload plugin makes more but if you don't need all that, you can use this way.
PPS：当然 jQuery-File-Upload 插件可以做更多，但如果你不需要所有这些，你可以使用这种方式。
P.P.P.S: you should have already functional non-ajax file upload for do that =)
PPPS：你应该已经有功能性的非 ajax 文件上传功能了 =)
回答by Serghei Topor
You can use Jquery Form
您可以使用Jquery 表单
- download jquery.form.min.jsand put it to vendor/assets/javascriptsfolder
- in your application.js
//= require jquery.form
in your view (haml sample):
= form_for user, authenticity_token: true, :multipart => true, id: 'user_form' do |f|
= f.label :avatar, t("user.avatar")
= f.file_field :avatar, accept: 'image/png,image/gif,image/jpeg'
= f.submit t(user.new_record? ? 'add' : 'update'), class: 'btn btn-primary', data: {disable_with: t(user.new_record? ? 'adding' : 'updating')}
:javascript
$('#user_form').ajaxForm()
here is Rails app sample https://github.com/serghei-topor/ajax-file-upload-rails-sample
- 下载jquery.form.min.js并将其放入vendor/assets/javascripts文件夹
- 在你的application.js 中
//= 需要 jquery.form
在您看来（haml 示例）：
= form_for user,authenticity_token: true, :multipart => true, id: 'user_form' do |f|
= f.label :avatar, t("user.avatar")
= f.file_field :avatar, 接受: 'image/png,image/gif,image/jpeg'
= f.submit t(user.new_record? ? 'add' : 'update'), class: 'btn btn-primary', data: {disable_with: t(user.new_record? ? 'adding' : 'updating')}
:javascript
$('#user_form').ajaxForm()
这是 Rails 应用程序示例https://github.com/serghei-topor/ajax-file-upload-rails-sample
