1

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

我在用着：

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

我有：

  • 脚手架“房子”（has_many uploads）
  • 脚手架“上传”（用于上传的照片）（belongs_to house）

我可以：

  • 通过脚手架建造新房子（没有照片）
  • 使用 jquery-fileupload 通过脚手架上传上传照片

我需要：

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

我的文件：

  • 模型/house.rb：

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

  • 模型/上传.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

  • controllers/houses_controller.rb：
    一切都是标准的，但是

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

  • controllers/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。

4

1 回答 1

0

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

   <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-05T19:44:52.010 回答