将多张照片上传到 belongs_to 模型 (jquery-fileupload-rails)答案

【问题标题】：Upload multiple-photos to belongs_to model (jquery-fileupload-rails)将多张照片上传到 belongs_to 模型 (jquery-fileupload-rails)
【发布时间】：2013-10-05 13:55:49
【问题描述】：

我需要使用 jquery-upload-rails 上传多张照片以从模型“house”的“新”形式上传模型。

我正在使用：

导轨 4
回形针宝石
jquery-fileupload-rails gem

我有：

脚手架“房子”（已上传多次）
脚手架“上传”（用于上传的照片）（belongs_to house）

我可以：

通过脚手架搭建新房（无照片）
使用 jquery-fileupload 通过脚手架上传上传照片

我需要：

一个页面，用户在其中输入一些关于房子的信息（国家、城市、地址等）并使用 jquery-fileupload 选择一些照片。当他按下“创建房屋”按钮时，照片会上传并创建房屋。当然，新照片的上传模型中的house_id列必须是刚刚创建的房子的id。

我的文件：

models/house.rb：

has_many :uploads
accepts_nested_attributes_for :uploads, :allow_destroy => true

models/upload.rb

belongs_to :house
has_attached_file :upload, :styles => { :large => "800x800", :medium => "400x400>", :small => "200x200>" }
include Rails.application.routes.url_helpers
def to_jq_upload
{
  "name" => read_attribute(:upload_file_name),
  "size" => read_attribute(:upload_file_size),
  "url" => upload.url(:original),
  "delete_url" => upload_path(self),
  "delete_type" => "DELETE" 
}
end

控制器/houses_controller.rb:
一切都是标准的，但是

params.require(:house).permit(..., uploads_attributes: [:upload, :house_id])

控制器/uploads_controller.rb:
一切都是标准的，但添加了渲染 json to_jq_upload

views/add/house.html.erb

<%= form_for @house,  :html => { :multipart => true, :id => "fileupload"  } do |f| %>
...some inputs with house info...
<input type="file" class="form-control"  name="house[uploads_attributes][][upload]" id="upload_upload">
<table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
<% end %>
...script files...

所以现在我可以输入一些信息，选择一些照片，但是有两种方法：

如果我按下照片附近的开始上传按钮，则上传这张照片，创建新房子，house_id 也在它的位置上。但这仅适用于一张照片，当我单击下一张照片上的开始上传时，会用这张照片创建另一栋房子。

如果我按“创建房屋”按钮，则创建新房屋时根本没有任何照片。

所以我需要点击“创建房屋”按钮上传照片并创建新房屋。
或者当我单击照片旁边的上传照片时，它会被上传到模型，但在我按下“创建房屋按钮”后会设置 house_id。

【问题讨论】：

标签： jquery file-upload paperclip ruby-on-rails-4

【解决方案1】：

好的，我已经弄清楚了一切。首先，要制作一个不会重定向到另一个页面并让照片上传的按钮，我使用了以下代码：

   <div class="row fileupload-buttonbar"> 
     <button type="submit" class="btn btn-primary start">
      <i class="icon-upload icon-white"></i>
      <span>Start upload</span>
    </button>
   </div>

其次，为了让插件在一个帖子操作中上传文件，我编辑了脚本：

<script type="text/javascript" charset="utf-8">
    var num_added = 0;
    var added = 0;
    var all_data = {};
    $(function () {
        // Initialize the jQuery File Upload widget:
        $('#fileupload').fileupload({
          complete: function (e, data) {
            window.location = "<%= root_url %>";
        },
          singleFileUploads: false
        })  .bind('fileuploadadd', function (e, data) {num_added++;})
            .bind('fileuploadsubmit', function (e, data) {
            if(added < num_added)
            {
            if (added == 0)
            all_data = data;
            else
            {
            $.each(data['files'], function(i, file){
            all_data['files'].push(file);
            });
            $.each(data['context'], function(i, context){
            all_data['context'].push(context);
            });
            }
            added++;
            if (added == num_added)
            {
            added++;
            all_data.submit();
            }
            return false;
            }
            })
            .bind('fileuploadsend', function (e, data) {num_added = 0; added = 0;});

        // 
        // Load existing files:
        $.getJSON($('#fileupload').prop('action'), function (files) {
          var fu = $('#fileupload').data('blueimpFileupload'), 
            template;
          fu._adjustMaxNumberOfFiles(-files.length);
          console.log(files);
          template = fu._renderDownload(files)
            .appendTo($('#fileupload .files'));
          // Force reflow:
          fu._reflow = fu._transition && template.length &&
            template[0].offsetWidth;
          template.addClass('in');
          $('#loading').remove();
        });

    });
  </script>

【讨论】：