將多張照片上傳到belongs_to模型（jquery-fileupload-rails）

我需要使用jquery-upload-rails將多張照片上傳到模型'house'的'new'形式。將多張照片上傳到belongs_to模型（jquery-fileupload-rails）

我使用：

軌道4
回形針寶石
jQuery的文件上傳，軌寶石

我：

支架 '房子' （has_many上傳）
腳手架 '上傳'（對上傳的照片）（belongs_to的房子）

我可以：

創建直通支架房子新房子（無照片）
上傳照片直通支架與jquery-上傳文件上傳

我需要：

一個頁面，用戶輸入的一些信息房子（國家，城市，地址等），並使用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

的意見/添加/ 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。

來源

2013-10-05 goooseman

好的，我已經算出了所有的東西。首先，做一個按鈕，這並不重定向到另一個頁面，並讓照片上傳我用這個代碼：

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

來源

2013-10-05 19:44:52 goooseman

將多張照片上傳到belongs_to模型（jquery-fileupload-rails）

回答

相關問題