基于ruby的gem remotipart的异步上传文件

针对某一对象保存实例化之前，异步上传图片保存。

gem 'remotipart', '~> 1.2'

//= require jquery.remotipart

<div class="ui grid">
  <div class="left floated fourteen wide column">
    <h2><a href="javascript:history.back()"><i class="blue reply icon"></i></a>添加知识</h2>
  </div>
</div>
<%= render 'form', url: admin_knowledge_libraries_path, meth: :post %>
<% content_for :scripts do %>
	<script>	
	    function add_document(){
	   	 var draft_img = $("#draft_img").val();
	   	 if (draft_img != ""){
	       $("#draft_img_message").text("")	;
	       $("#image_preview_form").submit();
	     }else{
	       $("#draft_img_message").text("请选择上传文件。")	;
	     }
	    }
	</script>
<% end %>

  def add_document
    new_attachment = ::Attachment.create({attachment_entity_type: ::Knowledge::Library.name, path: params[:draft_img], created_by: CreatedBy.format_created_by(current_employee)})
    had_attachement_ids = params[:had_attachement_ids].present? ? params[:had_attachement_ids].split(",") : []
    @had_attachement_ids = had_attachement_ids << new_attachment.id

    @new_problem_message_images = ::Attachment.where(id:@had_attachement_ids)
    @attachement_ids = @had_attachement_ids.join(",")

    respond_to do |format|
      format.js
    end
  end

<table class="ui selectable striped celled table">
  <tbody>
	  <tr>
	    <td colspan="10">
		    <div id="image_preview"><%= render partial: "message_image_list", locals: { message_image_list: @new_problem_message_images} %></div>
	        <br/>
			<div class="row-fluid">
			  <%= form_for @library, :method=>"post", :remote=>true , :url=>"/admin/knowledge/libraries/add_document", html: { id: 'image_preview_form',:multipart => true,autocomplete: "off"  } do |f| %>
				文档附件：
				<%= file_field_tag "draft_img", id: 'draft_img' %>
				<%= hidden_field_tag :had_attachement_ids,@attachement_ids %>
			  <% end %>
			  <span id="draft_img_message" style="color: red"></span>
			</div>
	    </td>	
        </tr>
  </tbody>
</table>        


<%= simple_form_for @library, url: url, method: meth do |f| %>
	<div class="ui blue segment">
	    <div class="four fields">
	       <%= f.input :title %>
	    </div>
	    <div class="four fields">
	        <div class="field">
	          <label>发布时间</label>
	          <div class="ui calendar J_calendar_datetime">
	            <div class="ui input left icon">
	              <i class="calendar icon"></i>
	              <%= f.input_field :started_at, as: :string %>
	            </div>
	          </div>
	        </div>
	    </div>
	    <div class="four fields">
	      <%= f.input :source %>
	      <%= f.input :source_url %>
	    </div>
            <%= hidden_field_tag :commit_attachement_ids,@attachement_ids %>
	</div>
	<div class="footer_btn">
		<%= f.submit '提交', class: 'ui primary mini button' %>
	</div>
<% end %>

  $("#image_preview").html('<%= j(render partial: "message_image_list", locals: { message_image_list: @new_problem_message_images} ) %>');
  $("#commit_attachement_ids").val('<%=@attachement_ids%>')
  $("#had_attachement_ids").val('<%=@attachement_ids%>')

   <% if message_image_list %>
   <table>
   <% message_image_list.each_with_index do |att,i| %>
        <% if i == 0 %>
          <tr>
        <% elsif (i >= 10 && i%10 == 0) %>
          </tr><tr>
        <% end %>
          <td>
             <a href="<%= att.path %>" target="_blank">
             <%if att&.content_type&.include?("image")%>
               <%= image_tag att.path, width: '100px', heigh: '50px', title: att.name,style:"margin:5px;" %>
             <% else%>
               <div class="column"><i class="file icon"></i><%= att.name %></div>
             <% end %>
             </a>
          </td>
   <% end %>
   </tr>
  </table> 
 <% end %>