javascript - 将 Dropzone.js 与其他表单字段集成到 html 表单中

Question

我想将 dropzonejs 添加到具有其他元素的表单中。我找到了这个示例并按照说明进行操作，不幸的是整个 from 变成了 dropzonejs 拖放区:https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone

这是我的代码:

<form action="/Post/Edit" class="dropzone" enctype="multipart/form-data" method="post">
  <div class="form-group">
    <label for="PostAddress_AddressLineOne">Address Line One</label>
    <input class="form-control" id="PostAddress_AddressLineOne" name="PostAddress.AddressLineOne" type="text" value="" />
  </div>
  <div class="dropzone-previews"></div>
  <div class="fallback">
    <!-- this is the fallback if JS isn't working -->
    <input name="file" type="file" multiple />
  </div>

  <script type="text/javascript">
    Dropzone.options.dropzoneJsForm = {

      //prevents Dropzone from uploading dropped files immediately
      autoProcessQueue: false,
      uploadMultiple: true,
      parallelUploads: 25,
      maxFiles: 25,
      addRemoveLinks: true,
      previewsContainer: ".dropzone-previews",


      // The setting up of the dropzone
      init: function() {
        var myDropzone = this;

        // Here's the change from enyo's tutorial...

        $("#submit-all").click(function(e) {
          e.preventDefault();
          e.stopPropagation();
          myDropzone.processQueue();
        });

      }

    };
  </script>

我也关注了下面的帖子，整个从仍然是一个下降区: Integrating dropzone.js into existing html form with other fields

我必须在表单中有一个 from with 吗？

谢谢

Answer 1

您的表单类是“dropzone”，这就是表单成为 dropzone 的原因。

仅在您想要成为拖放区的实际元素上使用“拖放区”类。例如，尝试将“dropzone-previews”更改为“dropzone”。

或者，如果您想以编程方式创建保管箱，请使用:

Dropzone.autoDiscover = false;

这将关闭类为“dropzone”的元素的自动转换。