【问题标题】:Dropzone.js events not firingDropzone.js 事件未触发
【发布时间】:2017-04-16 06:06:41
【问题描述】:

我在 Dom 中有 dropzone 表单和一些事件处理程序。但是,没有任何事件在动作时被触发。文件被发送到服务器就好了。我只是想从服务器获取响应消息,以便我可以将图像的链接添加到数据库中

html:

<div>
    <form action="/file/upload" class="dropzone" id="dropzoneForm" method="post"></form>
</div>

脚本:

$(function () {

  Dropzone.autoDiscover = true;
  Dropzone.options.dropzoneForm = {
    init: function () {
      this.on("success", function(response) {
        alert('Success event fired! Check console');
        console.log(response);
      });
    },

    paramName: "file"

  };

});

【问题讨论】:

  • 您的表单中没有任何元素,所以我怀疑它没有任何大小来检测事件。尝试添加文件输入,在父 div 上使用 dropzone 设置为放置区域的大小。
  • 我尝试在表单中添加以下元素 仍然无法正常工作
  • dropzonejs.com 按照你的文档。
  • 您是否尝试过记录dragoverdragenter 事件?
  • 它现在工作))请参阅下面的答案

标签: javascript jquery html dropzone.js


【解决方案1】:

一段时间后,我发现了这个问题。由于某些原因,Dropzone.options 没有触发,因为它位于 $(function{}) 内部。所以这是一个像魅力一样工作的版本

<!DOCTYPE html>
<html lang="en"
<head>
  <meta charset="UTF-8">
  <title>Products</title
  <!-- Bootstrap core CSS -->
  <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">

  <!-- Dropzone css-->
  <link rel="stylesheet" href="assets/css/plugins/dropzone/dropzone.css">
  <link rel="stylesheet" href="assets/css/plugins/dropzone/basic.css">
</head>
<body>
  <div class="container" style="margin-top: 300px">
    <div class="well">

      <form action="/file/upload" class="dropzone" id="dropzoneForm">
        <div class="fallback">
          <input type="file" name="file" multiple="multiple">
        </div>
      </form>

    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="assets/plugins/dropzone/dropzone.js"></script>
  <script>
    Dropzone.options.dropzoneForm = {
      dictDefaultMessage: 'Drop file here or click to upload!!!!!!!!',
      addRemoveLinks: true,
      init: function () {
        this.on("addedfile", function(file) { alert("Added file."); });
      }
    };

  </script>
</body>
</html>

【讨论】:

  • 你太棒了兄弟!几个小时以来,我一直在尝试修复它。你的回答救了我!
  • 死了,同样不能在 $(document).ready(function () {
猜你喜欢
  • 2016-11-14
  • 1970-01-01
  • 2014-10-04
  • 1970-01-01
  • 2010-11-08
  • 2019-01-31
  • 2013-04-09
  • 2015-07-25
  • 2017-06-25
相关资源
最近更新 更多