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'）的结果的for循环中，或者如果你只想要两个表单，只需给每个表单一个id doc1和doc2，并为每个表单构建文件上传量。

使用jQuery-File-Upload在一个页面中使用多个表单

1 个答案: