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

时间:2011-04-01 12:49:42

标签: jquery ruby-on-rails

我在使用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;
});

views / photos / 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文件中启用.js接受config/environment.rb格式为     config.action_controller.use_accept_header = true

2 个答案:

答案 0 :(得分:1)

JavaScript无法访问文件系统/序列化file字段(HTML5允许使用不同的方法,但我不认为此解决方案是您正在寻找的)。您必须在iframe中使用真实表单才能实现AJAXy上传 - 或使用Flash(最好与SWFUploadPlupload等上传者一起使用。)

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

答案 1 :(得分:1)

您正在尝试通过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);