1

我正在尝试添加多个关联不同类型文档的表单，但是当我尝试从第二个表单添加文件时，它会显示在主要表单提交中，也显示在流程事件中。请告知这里可能有什么问题。

<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>
4

1 回答 1

1

您使用的变量“this”不明确，可能是问题的原因。最简单的解决方案是分别启动每个表单 - 在 $('.documents') 的结果的 for 循环中，或者如果您期望只有两个表单，只需为每个表单指定一个 id doc1 和 doc2 并为每个表单构建文件上传.

于 2014-01-13T12:34:39.963 回答