使用 jQuery / Javascript 在 Rails 中的 Ajaxy 文件上传问题答案

【问题标题】：Ajaxy file upload issue in Rails using jQuery / Javascript使用 jQuery / Javascript 在 Rails 中的 Ajaxy 文件上传问题
【发布时间】：2011-04-01 12:49:41
【问题描述】：

我在使用 Rails 和 jQuery 上传文件时遇到问题，我使用的是 attachment_fu 插件。

我正在尝试上传（创建）属于相册的照片资源。相册有很多照片。

这是我在 application.js 中编写的 jQuery 代码

 $("#new_photo").submit(function(){
   $.post($(this).attr("action")+'.js', $(this).serialize(), null, "script");
   return false;
 });

但是，创建新专辑的类似 jQuery 代码工作正常！这是在 application.js 中创建新专辑的 jQuery 代码

$("#new_album").submit(function(){
$.post($(this).attr("action")+'.js', $(this).serialize(), null, "script");
return false;
});

意见/照片/new.html.erb

 <h1>New photo</h1>
 <% form_for([@album, @photo], :html => {:multipart => true}) do |f| %>
 <%= f.error_messages %>
 <%= render :partial => "form", :object => f %>
 <%= f.submit "Create"%>
 <% end %>
 <%= link_to 'Back', [@album, @photo], :method => :get %>

这是我在尝试创建新照片时在日志中遇到的错误：

Processing PhotosController#create to js (for 127.0.0.1 at 2011-04-01 17:41:52) [POST]
  Parameters: {"format"=>"js", "album_id"=>"1",    
  "action"=>"create",                        
   "authenticity_token"=>"k1Y1ILWbLFWYFaCwpkwW/W13aPe8UPoV0Fd+naO8bxU=", "controller"
    =>"photos"}
   User Columns (0.0ms)   SHOW FIELDS FROM `users`
   User Load (0.0ms)   SELECT * FROM `users` WHERE (`users`.`id` = 1) LIMIT 1
   Album Columns (0.0ms)   SHOW FIELDS FROM `albums`
   Album Load (15.6ms)   SELECT * FROM `albums` WHERE (`albums`.`id` = 1)
   Photo Columns (15.6ms)   SHOW FIELDS FROM `photos`
   SQL (0.0ms)   BEGIN
   Photo Create (0.0ms)   Mysql::Error: Column 'filename' cannot be null: INSERT INTO  
  `photos` (`size`, `created_at`, `content_type`, `tag_id`, `album_id`,  
  `thumbnail`, `updated_at`, `filename`, `height`, `parent_id`, `width`) VALUES(NULL, 
  '2011-04-01 12:11:52', NULL, NULL, 1, NULL, '2011-04-01 12:11
  :52', NULL, NULL, NULL, NULL)
  SQL (0.0ms)   ROLLBACK

  ActiveRecord::StatementInvalid (Mysql::Error: Column 'filename' cannot be null:  
  INSERT INTO `photos` (`size`, `created_at`, `content_type`, `tag_id`,
 `album_id`, `thumbnail`, `updated_at`, `filename`, `height`, `parent_id`, `width`)  
  VALUES(NULL, '2011-04-01 12:11:52', NULL, NULL, 1, NULL, '2011-04-0
  12:11:52', NULL, NULL, NULL, NULL)):

  Rendered rescues/_trace (203.1ms)
  Rendered rescues/_request_and_response (0.0ms)
  Rendering rescues/layout (internal_server_error)
  Problems loading RmagickProcessor: no such file to load -- RMagick2.so
  escues/layout (internal_server_error)
  SQL (0.0ms)   SET NAMES 'utf8'
  SQL (0.0ms)   SET SQL_AUTO_IS_NULL=0

我还启用了use_accept_header 以在我的config/environment.rb 文件中接受.js 格式为 config.action_controller.use_accept_header = true

【问题讨论】：

标签： jquery ruby-on-rails

【解决方案1】：

JavaScript 无法访问文件系统/序列化file 字段（HTML5 允许使用不同的方法，但我认为此解决方案不是您正在寻找的）。您必须在 iframe 中使用真实表单来实现 AJAXy 上传 - 或使用 flash（最好与 SWFUpload 或 Plupload 等上传器一起使用）。

我建议你阅读this article。与您最相关的是第 6 步。使用 iframe 和 responds_to_parent 部分。

【讨论】：

我对那个序列化的东西有疑问。你可能是对的。我会试试 Plupload 和 SWFupload

【解决方案2】：

您正在尝试通过 XMLHTTPRequest 上传文件，这是不可行的。我使用plupload 进行类似AJAX 的上传。这是我对 rails 的设置——确保传入真实性令牌：

settings = $.extend({
  runtimes : 'gears,html5,flash,silverlight,browserplus',
  browse_button : this.attr('id'),
  max_file_size : '20mb',
  unique_names : true,
  flash_swf_url : '/javascripts/plupload/plupload.flash.swf',
  silverlight_xap_url : '/javascripts/plupload/plupload.silverlight.xap',
  filters : [
    {title : "Image files", extensions : "jpg,gif,png"},
    {title : "Zip files", extensions : "zip,gz,bz2,tar"}
  ],
  multipart: true,
  multipart_params: {
     "authenticity_token" : $("input[name=authenticity_token]").val(),
     "_method" : "put",
     "field" : 'file'
    }
}, settings);

【讨论】：