Dropzone在上传前显示图标

Question

我正在尝试将dropzone.js用于ASP.NET MVC 5应用程序，并且我得到了一些奇怪的显示行为。

Dropzone正在添加到现有表单中。我将autoProcessQueue设置为false，因为我希望用户必须点击Submit按钮。将文件添加到dropzone后，缩略图会在其下方显示两个图标。一个是复选框，另一个是X.它们看起来可能是成功和失败的图标。看看这张图片：

我还注意到，当用户单击文件时，我没有获得进度条动画。这里发生了什么？我的dropzone配置错了吗？

以下是代码：

@{
    ViewBag.Title = "Home Page";
}

@model WebApplication1.Controllers.TestViewModel

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css">

<form id="form" method="post" enctype = "multipart/form-data">
    <input type="text" name="Field1" />
    <select name="Field2">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <div id="dz-message">
        drop file here
    </div>
    <input id="submit" type="submit"/>
</form>

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"></script>

<script>
    $(document).ready(function() {
        Dropzone.autoDiscover = false;

        var myDropzone = new Dropzone("#form", {
            url: "/Home/Upload",
            paramName: "Field3",
            autoProcessQueue: false,
            maxFiles: 1,
            clickable: true,

            init: function () {
                var dropzone = this;

                this.element.querySelector("#submit").addEventListener("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    dropzone.processQueue();
                });
            }
        });
    });
</script>

Answer 1

好吧，掌心前额。我刚刚在dropzone元素上没有form类。早点拿走它来尝试一些东西而忘了把它重新放回去。

的RAR。