Rails、jQuery 文件上传和页面上的多个表单

Question

我有一个 rails 应用程序，我想在不刷新页面的情况下上传文档。我遵循 jQuery fileupload Railscast 并使此功能正常工作。但是，我上传文件的页面有很多上传表格，上传的文件总是到顶部表格（e.x.there 是 7 种上传表格，我通过表格 nr 6 上传图片，但文件是通过第一个上传的形式）。

带有表单的页面是 Memberships#index:

...    
<div class="tab-pane active" id="all_memberships">
      <%= render 'memberships_table', memberships: @memberships, no_content: I18n.t('tables.memberships.all') %>
    </div>
...
<script id="template-upload" type="text/x-tmpl">
  <div class="upload">
    <div class="progress"><div class="bar" style="width: 0%;"></div></div>
  </div>
</script>

_memberships.html.erb:

...
<%= render 'shared/candidate_req_status', membership: membership  %>
...

_candidate_req_status.html.erb:

...
<%= render 'shared/candidate_doc_form', req: req %>
...

最后 _candidate_doc_form.html.erb:

<%= simple_form_for  req do |f| %>
  <div class="candidate-doc-form">
    <%= f.file_field :candidate_doc, class: 'inline filestyle' %>
  </div>
<% end %>

我从咖啡文件启用 fileuploa:

jQuery ->
  $('.edit_candidate_requirement_status').each ->
    $(this).fileupload
      dataType: "script"
      add: (e, data) ->
        data.context = $(tmpl("template-upload", data.files[0]))
        $('#' + e.target.id).append(data.context)
        data.submit()
      progress: (e, data) ->
        if data.context
          progress = parseInt(data.loaded / data.total * 100, 10)
          data.context.find('.bar').css('width', progress + '%')

知道如何使用此设置正确上传文件吗？

Answer 1

Jquery fileupload 使用 formid 工作，每个表单都有唯一的 ID，如果您使用 7 个表单并期望每个表单有 7 个不同的上传，则用于调用 fileupload.hence，每次上传使用不同的 js 文件。例如，如果您有 7 种形式 ，请使用 7 种不同的 js 和形式 ids。 .

例如：-

在所有表格中，对每个表格使用不同的 ids...例如

 //in form 1
 <%= form_for(@object1,:html=>{:id=>"form_1_upload"}) do |f |%>
.....
....
....

//in form 7
 <%= form_for(@object7,:html=>{:id=>"form_7_upload"}) do |f |%>

        //add other as well as main javascripts to invoke fileupload
       //this to invoke fileupload for form_1 using form_1_upload id
        <%= javascript_include_tag "jQuery-File-Upload-9.9.3/form_1.js" %>
        ....
        ....
        ....
          //this to invoke fileupload for form_7 using form_7_upload id
        <%= javascript_include_tag "jQuery-File-Upload-9.9.3/form_7.js" %>

in individual js files...**use the form ids** to capture the uploads..

///form_1.js

// Initialize the jQuery File Upload widget:
    $('#form_1_upload').fileupload({

})

..
..
..


//use the same in all other forms and js

...希望对您有所帮助

Answer 2

我尝试了 Milind 的方法，但没有任何改变。结果是 bootstrap 插件 Bootstrap-filestyle 搞砸了上传。删除它后，一切正常（但我的上传按钮现在看起来不那么性感）。

Rails、jQuery 文件上传和页面上的多个表单

Rails, jQuery fileupload and multiple forms on page

jquery

file-upload

ruby-on-rails