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

我也关注了以下帖子，整个 from 仍然是一个放置区： Integrating dropzone.js into existing html form with other fields

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

谢谢

Answer 1

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

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

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

Dropzone.autoDiscover = false;

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

Answer 2

我还没有完全测试过这个，但是尝试在你想要放置框的地方添加这个 div，然后使用 css 来设置它的样式，使其尺寸正确。

<div class="dz-message" data-dz-message>Text you want in the drop area</div>