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

Question

我有一个 Rails 应用程序，我希望在不刷新页面的情况下上传文档。我遵循了 jQuery fileupload Railscast 并得到了这个功能。但是，我上传文件的页面有很多要上传的表格，上传的文件总是放在最上面的表格（有 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，用于调用 fileupload.因此，如果您使用 7 个表单，期望每个表单有 7 个不同的上传，则为每个上传使用不同的 js 文件..for例如，如果您有 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-filestyle 搞砸了上传。删除它后，一切正常（但我的上传按钮现在看起来不那么性感了）。