Ruby on rails 如何通过Ajax上传图像？

我制作了一张上传图片的表格：

gem paperclip install

表格：

加载图像可以正常工作

控制台显示：

Started POST "/images" for 127.0.0.1 at 2015-08-01 15:47:16 +0300
Processing by ImagesController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"PINHYvwaOerh2tFwIP8ad8Td8SPQmxh6m2Oy/uE0FzrdCn5UFRIf68KJ4/4fzzPLXITkScyhahlE+fU8mDUwEg==", "image"=>{"description"=>"gggggggggggggggggggggggggggg", "image"=>#<ActionDispatch::Http::UploadedFile:0x007fd62c55f7d0 @tempfile=#<Tempfile:/tmp/RackMultipart20150801-2493-1cks177.jpg>, @original_filename="f3.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"image[image]\"; filename=\"f3.jpg\"\r\nContent-Type: image/jpeg\r\n">}, "commit"=>"Загрузить картинку"}
  User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1  ORDER BY "users"."id" ASC LIMIT 1  [["id", 8]]
"-------------------1"
Command :: file -b --mime '/tmp/1779cf3aa50c413afc7e05adb7e1b0de20150801-2493-116a994.jpg'
Command :: identify -format '%wx%h,%[exif:orientation]' '/tmp/1779cf3aa50c413afc7e05adb7e1b0de20150801-2493-1wgxiwt.
...........
.............
......
Command :: file -b --mime '/tmp/1779cf3aa50c413afc7e05adb7e1b0de20150801-2493-1stgg9u.jpg'
  SQL (0.5ms)  INSERT INTO "images" ("description", "image_file_name", "image_content_type", "image_file_size", "image_updated_at", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING "id"  [["description", "gggggggggggggggggggggggggggg"], ["image_file_name", "f3.jpg"], ["image_content_type", "image/jpeg"], ["image_file_size", "8602"], ["image_updated_at", "2015-08-01 15:47:16 +0300"], ["created_at", "2015-08-01 12:47:16.575017"], ["updated_at", "2015-08-01 12:47:16.575017"]]
   (22.5ms)  COMMIT
   (0.2ms)  BEGIN
   (0.1ms)  COMMIT
"-------------------2"
   (0.1ms)  BEGIN
  SQL (0.4ms)  UPDATE "images" SET "user_id" = $1, "updated_at" = $2 WHERE "images"."id" = $3  [["user_id", 8], ["updated_at", "2015-08-01 12:47:16.677588"], ["id", 2]]
   (17.3ms)  COMMIT
Completed 200 OK in 459ms (Views: 0.7ms | ActiveRecord: 41.7ms)

Started POST "/images" for 127.0.0.1 at 2015-08-01 16:00:01 +0300
Processing by ImagesController#create as JSON
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"uqqR6HtkkYDuhWoFHHCmll2mWuzEHfBtpMQ/A2hwivZbI6jekmy3gc3WWIsjQI8qxf9Phtgngg57XnjBEXGt3g==", "image"=>{"description"=>"ggggggggggggggggggggggggggggg"}}
  User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1  ORDER BY "users"."id" ASC LIMIT 1  [["id", 8]]
"-------------------1"
   (0.1ms)  BEGIN
   (0.1ms)  ROLLBACK
   (0.1ms)  BEGIN
   (0.1ms)  ROLLBACK
"-------------------3"
Completed 403 Forbidden in 8ms (Views: 0.2ms | ActiveRecord: 0.6ms)

但此方法不起作用：图像未加载，控制台显示：

Started POST "/images" for 127.0.0.1 at 2015-08-01 15:47:16 +0300
Processing by ImagesController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"PINHYvwaOerh2tFwIP8ad8Td8SPQmxh6m2Oy/uE0FzrdCn5UFRIf68KJ4/4fzzPLXITkScyhahlE+fU8mDUwEg==", "image"=>{"description"=>"gggggggggggggggggggggggggggg", "image"=>#<ActionDispatch::Http::UploadedFile:0x007fd62c55f7d0 @tempfile=#<Tempfile:/tmp/RackMultipart20150801-2493-1cks177.jpg>, @original_filename="f3.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"image[image]\"; filename=\"f3.jpg\"\r\nContent-Type: image/jpeg\r\n">}, "commit"=>"Загрузить картинку"}
  User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1  ORDER BY "users"."id" ASC LIMIT 1  [["id", 8]]
"-------------------1"
Command :: file -b --mime '/tmp/1779cf3aa50c413afc7e05adb7e1b0de20150801-2493-116a994.jpg'
Command :: identify -format '%wx%h,%[exif:orientation]' '/tmp/1779cf3aa50c413afc7e05adb7e1b0de20150801-2493-1wgxiwt.
...........
.............
......
Command :: file -b --mime '/tmp/1779cf3aa50c413afc7e05adb7e1b0de20150801-2493-1stgg9u.jpg'
  SQL (0.5ms)  INSERT INTO "images" ("description", "image_file_name", "image_content_type", "image_file_size", "image_updated_at", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING "id"  [["description", "gggggggggggggggggggggggggggg"], ["image_file_name", "f3.jpg"], ["image_content_type", "image/jpeg"], ["image_file_size", "8602"], ["image_updated_at", "2015-08-01 15:47:16 +0300"], ["created_at", "2015-08-01 12:47:16.575017"], ["updated_at", "2015-08-01 12:47:16.575017"]]
   (22.5ms)  COMMIT
   (0.2ms)  BEGIN
   (0.1ms)  COMMIT
"-------------------2"
   (0.1ms)  BEGIN
  SQL (0.4ms)  UPDATE "images" SET "user_id" = $1, "updated_at" = $2 WHERE "images"."id" = $3  [["user_id", 8], ["updated_at", "2015-08-01 12:47:16.677588"], ["id", 2]]
   (17.3ms)  COMMIT
Completed 200 OK in 459ms (Views: 0.7ms | ActiveRecord: 41.7ms)

Started POST "/images" for 127.0.0.1 at 2015-08-01 16:00:01 +0300
Processing by ImagesController#create as JSON
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"uqqR6HtkkYDuhWoFHHCmll2mWuzEHfBtpMQ/A2hwivZbI6jekmy3gc3WWIsjQI8qxf9Phtgngg57XnjBEXGt3g==", "image"=>{"description"=>"ggggggggggggggggggggggggggggg"}}
  User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1  ORDER BY "users"."id" ASC LIMIT 1  [["id", 8]]
"-------------------1"
   (0.1ms)  BEGIN
   (0.1ms)  ROLLBACK
   (0.1ms)  BEGIN
   (0.1ms)  ROLLBACK
"-------------------3"
Completed 403 Forbidden in 8ms (Views: 0.2ms | ActiveRecord: 0.6ms)

---

从日志文件中可以看到，您的

ajax

没有传递图像文件：

第一:

Parameters: {"utf8"=>"✓", ... "image"=>{"description"=>"gg..."}}

第二：

Parameters: {"utf8"=>"✓", ... "image"=>{"description"=>"gg...", "image"=>#<ActionDispatch::Http::UploadedFile:0x007fd62c55f7d0 @tempfile=#<Tempfile:/tmp/RackMultipart20150801-2493-1cks177.jpg>, @original_filename="f3.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name

---

将

@image.save

更改为

@image.save。这将抛出一个错误，说明为什么它没有被保存，而不是默默地失败。谢谢。这里的解决方案
Parameters: {"utf8"=>"✓", ... "image"=>{"description"=>"gg...", "image"=>#<ActionDispatch::Http::UploadedFile:0x007fd62c55f7d0 @tempfile=#<Tempfile:/tmp/RackMultipart20150801-2493-1cks177.jpg>, @original_filename="f3.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name

$.ajax({
    url: '/images',
    type: 'POST',
    dataType: "JSON", 
    data: $('#new_image').serialize(),
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    success: function(image){
      alert('im load success');
    },
    error: function(xhr, ajaxOptions, thrownError){
      alert(xhr.responseText);
    }        
  })