如何为嵌套附件使用jquery-fileupload?

前端之家收集整理的这篇文章主要介绍了如何为嵌套附件使用jquery-fileupload?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用 jquery-fileupload-rails上传多个文件.

我想实现设置文件名称添加多个附件的能力.

但是现在当我选择3个附件时,它会创建3个文档,每个文档都有一个附件.

我想我需要改变某种形式来添加附件.我添加了多个选项和编码名称.

我想使用这个插件,因为稍后我会添加拖放功能.

= simple_form_for [:member,@document],html: { multipart: true } do |f|
  = f.input :name
  = f.simple_fields_for :attachments,Attachment.new do |a|
    = a.file_field :attachment,multiple: true,name: "document[attachments_attributes][][attachment]"
  = f.submit

生成

<input id="document_attachments_attributes_0_attachment" multiple="multiple" name="document[attachments_attributes][][attachment]" type="file">

JS

jQuery ->
    $('#new_document').fileupload()

楷模

class Document < ActiveRecord::Base
  has_many :attachments
  accepts_nested_attributes_for :attachments
end

class Attachment < ActiveRecord::Base
  belongs_to :document

  has_attached_file :attachment
end

调节器

class Member::DocumentsController < ApplicationController
  def new
    @document = Document.new
  end

  def create
    @document = Document.new params[:document]

    if @document.save
      redirect_to member_documents_path,notice: "Created"
    else
      redirect_to member_documents_path,alert: "Not created"
    end
  end

  private

  def document_params
    params.require(:document).permit(:name,attachments_attributes: [:attachment])
  end
end

解决方法

我用两种不同的表格做了类似的事情.基本上,您为文档创建一个表单,其中包含名称字段和attachment_ids的隐藏字段,然后是附件表单.您可以单独上传附件(不幸的是当时是孤立记录),然后使用新创建的附件记录的ids来更新文档下的隐藏字段.

所以基本上,从附件控制器创建一个json响应,包括新创建的对象的id.然后创建一个javascript函数,将新创建的ID从每个成功回调添加到隐藏字段.

我确定有一个更简单的方法来做到这一点,但是我总是通过多页面上传和嵌套属性得到一点点遗憾.

编辑:所以我发现一些旧的代码,并移植它.

class Member::AttachmentsController < Member::BaseController

  def create
    @attachment = Attachment.create!(params[:attachment])
    # TWO APPROACHES,render json view,or respond with a .js view create.js.erb
    # render json: @attachment.to_json

  end

end

class Member::DocumentsController < Member::BaseController

  def create
    @document = Document.new params[:document]
    @attachments = Attachment.find(params[:attachment_ids].split(','))
    if @document.save
      @document.attachments = @attachments
      redirect_to member_documents_path,alert: "Not created"
    end
  end
end

然后在屏幕截图中创建一个create.js.erb

var screenshotContainer,idContainer;

screenshotContainer = $('#attachments');
idContainer =  $('#attachment_ids_hidden_field');  

screenshotContainer.append('<%= j render @attachment %>');

idContainer.val(function(i,v) {
  var arr = v.split(',');
  arr.push('<%= @attachment.id %>');
  return arr.join(',');
});

这可能是一个屏幕截图渲染调用,但是显示它,但是你需要在部分.

<%= image_tag(attachment.attachment,size: "100x100",data: { attachment_id:     attachment.id }) if attachment.attachment? %>

文件格式中创建

<input type="hidden" id="attachment_ids_hidden_field" value="" name="attachment_ids">

另一种方法是使用json进行响应,并在fileupload的完成回调中将新附件的json ID添加到隐藏字段.

你需要解析hidden_​​ids的任何混乱可能比只是一个.split(‘,’)更好

我没有机会看得太过分了.

希望它有帮助.

原文链接:https://www.f2er.com/jquery/176753.html

猜你在找的jQuery相关文章