Question

我想将dropzonejs添加到包含其他元素的表单中。我找到了这个样本并按照说明进行操作，不幸的是整个变为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

我是否必须以表格形式提供？

由于

Answer 1

我还没有对此进行全面测试，但尝试在您想要放置框的位置添加此div，然后使用css对其进行样式设置，使其尺寸正确。

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

Answer 2

您的表单类是＆＃34; dropzone＆＃34;这就是表格变成掉落区的原因。

仅使用＆＃34; dropzone＆＃34;要成为dropzone的实际元素上的类。例如，尝试更改＆＃34; dropzone-previews＆＃34;进入＆＃34; dropzone＆＃34;。

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

Dropzone.autoDiscover = false;

这将关闭使用类＆＃34; dropzone＆＃34;自动转换元素。

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

2 个答案: