更新五

我刚刚进行了调试，这是日志（箭头出现在第 61 行），因此看起来产品项目会失败。

   47:  def create
   48:    @product = Product.new(product_params)
   49:
   50:    respond_to do |format|
   51:      if @product.save
   52:
   53:        if params[:images]
   54:          params[:images].each { |image|
   55:            @product.pictures.create(image: image)
   56:          }
   57:        end
   58:        flash[:notice] = "The product was successfully added."
   59:        redirect_to show_product_path and return
   60:      else
=> 61:        flash[:notice] = "The product was not able to be saved."
   62:        redirect_to new_product_path and return
   63:      end
   64:    end
   65:  end

更新四

抱歉，与上次更新一样，我在产品控制器中遗漏了一些东西，只是重定向命令。

  def create
    @product = Product.new(product_params)

    respond_to do |format|
      if @product.save

        if params[:images]
          params[:images].each { |image|
            @product.pictures.create(image: image)
          }
        end
        flash[:notice] = "The product was successfully added."
        redirect_to show_product_path and return
      else
        flash[:notice] = "The product was not able to be saved."
        redirect_to new_product_path and return
      end
    end
  end

更新三

我刚刚意识到，由于我删除了一些代码，我可能遗漏了一些重要的东西。我确实有一个用户模型，它是：

class User < ActiveRecord::Base
    has_many :products, :dependent => :destroy
end

本质上，用户创建一个产品，产品本身通过图片模型将图像与其绑定。我希望这能更清楚地解释一些事情。

更新二

我仍然收到与上述相同的错误，但我已将模型更新如下：

（将用户更改为用户，忘记添加 foreign_key，可选：true 不起作用，错误是这是一个未知密钥）

class Product < ActiveRecord::Base
  belongs_to :user, :foreign_key => 'user_id', optional: true
  has_many :pictures, :dependent => :destroy
end


class Picture < ActiveRecord::Base
  belongs_to :product, optional: true
  has_attached_file :image,
    :path => ":rails_root/public/images/:id/:filename",
    :url  => "/images/:id/:filename"

  do_not_validate_attachment_file_type :image
end

更新一

这是我上传图像时的日志：

Started POST "/products" for [IP ADDRESS] at [DATE AND TIME]
Processing by ProductsController#create as */*
  Parameters: {"file"=>#<ActionDispatch::Http::UploadedFile:0x007f621971b808 @tempfile=#<Tempfile:/tmp/RackMultipart20190227-181-kldesh.JPG>,     @original_filename="book1.JPG", @content_type="image/jpeg",     @headers="Content-Disposition: form-data; name=\"file\";     filename=\"book1.JPG\"\r\nContent-Type: image/jpeg\r\n">, "product"=>    {"name"=>"test"}}
  User Load (0.3ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1  ORDER BY "users"."id" ASC LIMIT 1  [["id", 21]]
   (0.2ms)  BEGIN
   (0.2ms)  ROLLBACK
Redirected to http://localhost:3000/products/new
Completed 200 OK in 7ms (ActiveRecord: 0.7ms)

本质上，无法保存图像并且会重定向回产品新页面。我不明白为什么会这样。

原始问题

所以我有一个使用 Paperclip 的基本图像上传系统（允许上传多个图像并且它们与创建的每个产品相关联）。我现在的问题是尝试添加一个图像上传进度条，经过一番搜索，听起来 Jquery 最适合这个。

我一直在关注这个： https://github.com/hayageek/jquery-upload-file 但我就是无法让它工作。

所以我有“产品”，它本身链接到“图片”。产品与图片具有一对多关系。

架构：

  create_table "products", force: :cascade do |t|
    t.string   "name"
    t.string   "description"
    t.integer  "image"
    t.datetime "created_at"
    t.datetime "updated_at"
    t.integer  "user_id"
  end

  create_table "pictures", force: :cascade do |t|
    t.string   "description"
    t.string   "image"
    t.integer  "product_id"
    t.datetime "created_at"
    t.datetime "updated_at"
    t.string   "product_token"
    t.string   "image_file_name"
    t.string   "image_content_type"
    t.integer  "image_file_size"
    t.datetime "image_updated_at"
  end

模型：

class Product < ActiveRecord::Base
  belongs_to :users
  has_many :pictures, :dependent => :destroy
end


class Picture < ActiveRecord::Base
  belongs_to :product
  has_attached_file :image,
    :path => ":rails_root/public/images/:id/:filename",
    :url  => "/images/:id/:filename"

  do_not_validate_attachment_file_type :image
end

控制器（产品）：

（我故意省略了一些东西，但我认为主要的是创建操作）

  def create
    @product = Product.new(product_params)

    respond_to do |format|
      if @product.save

        if params[:images]
          params[:images].each { |image|
            @product.pictures.create(image: image)
          }
        end
        flash[:notice] = "The product was successfully added."
        format.html { redirect_to @product, notice: 'Product was successfully created.' }
        format.json { render json: @product, status: :created, location: @product }
      else
        flash[:notice] = "The product was not able to be saved."
        format.html { render action: "new" }
        format.json { render json: @product.errors, status: :unprocessable_entity }
      end
    end
  end

视图（针对新产品）（再次，我删除了代码只是为了显示最相关的内容）：

<%= form_for @product, :html => { :class => 'form-horizontal', multipart: true } do |f| %>
  <div class="control-group">
    <%= f.label :name, :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :name, :class => 'text_field' %>
    </div>
  </div>

  <div class="control-group">
    <%= f.label :description, :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :description, :class => 'text_field' %>
    </div>
  </div>

  <div class="control-group">
    <%= f.label :pictures, :class => 'control-label' %>
    <div class="controls">
      <%= file_field_tag "images[]", type: :file, multiple: true %>
    </div>
  </div>

  <div class="form-actions">
    <%= f.submit nil, :class => 'btn btn-primary' %>
  </div>
<% end %>

显示（针对产品）：

        <td> Name </td>
        <td> <%= @product.name %> </td>
    <div class = "images_styling"> Photos </div>
    <% @products.pictures.each do |picture| %>
    <%= image_tag picture.images.url(:medium) %>
    <% end %>

现在，这是我尝试做的：

（在提交中添加了一个 fileUpload id 和一个保存 id）

查看新产品表单

  <div class="control-group">
    <%= f.label :pictures, :class => 'control-label' %>
    <div class="controls" id="fileUpload" >
      <%= file_field_tag "images[]", type: :file, multiple: true %>
    </div>
  </div>

  <div id="save" class="form-actions">
    <%= f.submit nil, :class => 'btn btn-primary' %>
  </div>

这是脚本我在网上获得（这在新产品表单的视图中）：

<script type="text/javascript">
  $(document).ready(function () {

      var fileUpload = $("#fileUpload").uploadFile({
      url: "/products",
      multiple: true,
      autoSubmit: false,
      showCancel: false,
      showAbort: false,
      dragDrop: true,
      maxFileCount: 4,
      showPreview: true,
      showProgress: true,
      showStatusAfterSuccess: true,
      dynamicFormData: function () {
        var name = $('#product_name').val();
        var data = {"product[name]": name};
        return data;
      }
    });

    $("#save").click(function (e) {
      $("#save").prop("disabled", true);
      fileUpload.startUpload();
      e.preventDefault();
    });


  });

</script>

但它不起作用。相反，当我单击提交按钮时，它会先“开始”然后“回滚”。有趣的是，按钮确实会显示每个图像的上传进度条。

但是，当我查看产品的“显示”时，图像不存在。我猜图像没有保存到产品中，因为“回滚”。我查看了日志，似乎其中没有任何实质性内容。

基于此，我该怎么做才能让它工作？有没有更简单的方法来实现我想要做的事情？