Dropzone.js - 单击 dropzone 元素时没有任何反应答案

【问题标题】：Dropzone.js - nothing happens when click dropzone elementDropzone.js - 单击 dropzone 元素时没有任何反应
【发布时间】：2018-03-07 13:27:42
【问题描述】：

我正在尝试在页面中添加 Dropzone 组件，但我对这个组件感到非常痛苦：无论我做什么，当我在 dropzone 的元素中单击或拖放文件时都不会发生任何事情。

<form id="registerUserForm" onsubmit="return submitForm()" class="mt-5">

    <div id="dropzoneDiv" class="dropzone dz-clickable">
        <div class="dz-default dz-message">
            <span>Drop files here to upload</span>
        </div>
     </div>
        .
        .
        .
</form>

如你所见，我在 javascript 中配置 Dropzone：

var dropzone=null;

$(document).ready(function () {
    Dropzone.autoDiscover = false;
    dropzone=$("#dropzoneDiv").dropzone({
        url: "/api/works/upload",
        acceptedFiles: 'image/*,video/*',
        autoProcessQueue: false,
        createImageThumbnails: true,
        addRemoveLinks: true
    });
});

function submitForm() {
    dropzone.processQueue();
    return false;
}

组件已正确渲染，但简单不起作用：

我做错了什么我没有注意到吗？

【问题讨论】：

标签： javascript jquery dropzone.js dropzone

【解决方案1】：

我偶然找到了解决方案，问题在于 $(document).ready() 语句。如果我删除此侦听器并直接使用 dropzone 配置调用，则该组件可以正常工作：

var dropzone = null;

Dropzone.autoDiscover = false;
dropzone = $("#dropzoneDiv").dropzone({
    url: "/api/works/upload",
    acceptedFiles: 'image/*,video/*',
    autoProcessQueue: false,
    createImageThumbnails: true,
    addRemoveLinks: true
});

function submitForm() {
    dropzone.processQueue();
    return false;
}

【讨论】：

【解决方案2】：

尝试使用 JQuery 2.*，如果您使用的是 JQuery > 3

var dropzone=null;

$(document).ready(function () {
    Dropzone.autoDiscover = false;
    dropzone=$("#dropzoneDiv").dropzone({
        url: "/api/works/upload",
        acceptedFiles: 'image/*,video/*',
        autoProcessQueue: false,
        createImageThumbnails: true,
        addRemoveLinks: true
    });
});

function submitForm() {
    dropzone.processQueue();
    return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.js"></script>

<form id="registerUserForm" onsubmit="return submitForm()" class="mt-5">

    <div id="dropzoneDiv" class="dropzone dz-clickable">
        <div class="dz-default dz-message">
            <span>Drop files here to upload</span>
        </div>
     </div>
</form>

【讨论】：