Question

我有一个rails应用程序，我想要上传文件而不刷新页面。我遵循jQuery fileupload Railscast并使此功能正常工作。但是，我上传文件的页面有很多上传形式，上传的文件总是排在最前面的表格（上面有7个上传表格，我通过表格nr 6上传图片，但文件是通过第一个表格上传的）。

包含表单的页面是会员编号#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.hence如果你使用7个表单，每个表单需要7个不同的上传，然后为每个上传使用不同的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

我尝试过米林德的方式，但这并没有改变任何事情。事实证明，引导程序插件Bootstrap-filestyle正在搞乱上传。删除后，一切正常（但我的上传按钮现在看起来不那么性感）。

Rails，jQuery fileupload和页面上的多个表单

2 个答案: