使用jQuery的文件上傳的一個頁面中的多個表格

Question

我想添加多個表單關聯不同類型的文檔，但是當我嘗試從第二個表單添加文件時，它顯示在主表單提交和處理事件。請告知這裏可能是錯的。

<form accept-charset="UTF-8" action="/docs/1" class="documents" enctype="multipart/form-data" id="new_document" method="post"> 
    <div class="input-append" > 
    <input class="filestyle" did="pdoc" id="document_doc_file" name="document[doc_file]" type="file" uid="template-upload-1" /> 
    </div> 
    <input id="document_doc_type" name="document[doc_type]" type="hidden" value="1" /> 
</form><script id="template-upload-1" type="text/x-tmpl"> 
    <div class="upload"> 
    {%=o.name%}<span class="pull-right" id="pbar">Uploading 0%</span></span> 
    <div class="progress"><div class="bar" style="width: 0%"></div></div> 
    </div> 
</script> 
<div id="pdoc"></div> 


<form accept-charset="UTF-8" action="/docs/1" class="documents" enctype="multipart/form-data" id="new_document" method="post"> 
    <div class="input-append" > 
    <input class="filestyle" did="ldoc" id="document_doc_file" name="document[doc_file]" type="file" uid="template-upload-2" /> 
    </div> 
    <input id="document_doc_type" name="document[doc_type]" type="hidden" value="2" /> 
</form><script id="template-upload-2" type="text/x-tmpl"> 
    <div class="upload"> 
    {%=o.name%}<span class="pull-right" id="pbar">Uploading 0%</span></span> 
    <div class="progress"><div class="bar" style="width: 0%"></div></div> 
    </div> 
</script> 
<div id="ldoc"></div> 

<script type="text/javascript"> 
    $(function() { 
     $('.documents').fileupload({ 
     dropZone: $(this).find('input:file'), 
     dataType: 'script', 
     fileInput: $(this).find('input:file'), 
     singleFileUploads: true, 
     add: function(e, data) { 
      var file, types; 
      types = /(\.|\/)(pdf|xls|xlsx)$/i; 
      file = data.files[0]; 
      if (types.test(file.type) || types.test(file.name)) { 
      uid = $(this).find(':file').attr('uid'); 
      if ($('#' +uid).length > 0) { 
       data.context = $(tmpl(uid, file).trim()); 
      } 
      did = $(this).find(':file').attr('did'); 
      $('#' + did).append(data.context); 
      data.submit(); 
      } else { 
      alert("" + file.name + " is not a pdf or an excel file."); 
      } 
     }, 
     progress: function (e, data) { 
      if (data.context) { 
      var progress = parseInt(data.loaded/data.total * 100, 10); 
      data.context.find('.bar').css('width', progress + '%'); 
      if (progress < 100) { 
       data.context.find('#pbar').html('Uploading ' + progress + '% ...'); 
      } else { 
       data.context.find('#pbar').html('Upload Complete'); 
      } 
      } 
     } 
     }); 
    $(document).bind('drop dragover', function (e) { 
     e.preventDefault(); 
    }); 
    }); 
</script> 

Answer 1

您使用的變量'this'不明確，可能是問題的原因。 最簡單的解決方案是分別啓動每個表單 - 在$（'。documents'）的結果循環中，或者如果您期望只有兩種形式，那麼只需爲每個表單分配一個id doc1和doc2，然後構建fileupload每。