Dropzone js 文档示例不起作用

Question

我正在关注 Dropzone.js 的 example from the documentation。该示例似乎不起作用。这就是我的结构：

Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

  // The configuration we've talked about above
  autoProcessQueue: false,
  uploadMultiple: true,
  parallelUploads: 100,
  maxFiles: 100,

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

    // First change the button to actually tell Dropzone to process the queue.
    this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
      // Make sure that the form isn't actually being sent.
      e.preventDefault();
      e.stopPropagation();
      myDropzone.processQueue();
    });

    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
    // of the sending event because uploadMultiple is set to true.
    this.on("sendingmultiple", function() {
      // Gets triggered when the form is actually being sent.
      // Hide the success button or the complete form.
    });
    this.on("successmultiple", function(files, response) {
      // Gets triggered when the files have successfully been sent.
      // Redirect user or notify of success.
    });
    this.on("errormultiple", function(files, response) {
      // Gets triggered when there was an error sending the files.
      // Maybe show form again, and notify user of error
    });
  }

}

<head>
  <meta charset="UTF-8">
  <title>Dropzone JS tutorial</title>
  <script src="https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone-min.js"></script>
  <link href="https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone.css" rel="stylesheet" type="text/css" />

</head>

<body>
  <form id="my-awesome-dropzone" class="dropzone" action="#">
    <div class="dropzone-previews"></div>
    <!-- this is were the previews should be shown. -->

    <!-- Now setup your input fields -->
    <input type="email" name="username" />
    <input type="password" name="password" />

    <button type="submit">Submit data and files!</button>
  </form>
<script src="dropzone-custom.js"></script>
</body>

这是我得到的输出：

当我查看调试控制台时，我找不到任何错误。有人可以告诉我我缺少什么或做错了什么吗？

Answer 1

你必须使用

Dropzone.discover();

在您的配置之前，因为在版本 6 中自动发现已被删除这样你就可以拥有：

  Dropzone.discover();
Dropzone.options.myAwesomeDropzone = { 

}

Answer 2

看起来该示例的问题与将值馈送到 Dropzone 的方式有关。使用构造函数似乎可行。

const dz = new Dropzone(".dropzone", {

  // The configuration we've talked about above
  autoProcessQueue: false,
  uploadMultiple: true,
  parallelUploads: 100,
  maxFiles: 100,

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

    // First change the button to actually tell Dropzone to process the queue.
    this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
      // Make sure that the form isn't actually being sent.
      e.preventDefault();
      e.stopPropagation();
      myDropzone.processQueue();
    });

    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
    // of the sending event because uploadMultiple is set to true.
    this.on("sendingmultiple", function() {
      // Gets triggered when the form is actually being sent.
      // Hide the success button or the complete form.
    });
    this.on("successmultiple", function(files, response) {
      // Gets triggered when the files have successfully been sent.
      // Redirect user or notify of success.
    });
    this.on("errormultiple", function(files, response) {
      // Gets triggered when there was an error sending the files.
      // Maybe show form again, and notify user of error
    });
  }

});

<head>
  <meta charset="UTF-8">
  <title>Dropzone JS tutorial</title>
  <script src="https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone-min.js"></script>
  <link href="https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone.css" rel="stylesheet" type="text/css" />

</head>

<body>
  <form id="my-awesome-dropzone" class="dropzone" action="#">
    <div class="dropzone-previews"></div>
    <!-- this is were the previews should be shown. -->

    <!-- Now setup your input fields -->
    <input type="email" name="username" />
    <input type="password" name="password" />

    <button type="submit">Submit data and files!</button>
  </form>
  <script src="dropzone-custom.js"></script>
</body>

Dropzone js 文档示例不起作用

Dropzone js documentation example not working

javascript

dropzone.js

dropzone