Question

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

我正在使用：

Rails 4
paperclip gem
jquery-fileupload-rails gem

我有：

脚手架'house'（has_many上传）
脚手架'上传'（上传的照片）（belongs_to house）

我可以：

通过脚手架房屋（不含照片）创建新房屋
使用jquery-fileupload

我需要：

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

我的档案：

模型/ house.rb：

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

模型/ 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。

Answer 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>

将多张照片上传到belongs_to模型（jquery-fileupload-rails）

1 个答案: