上传前显示图标的 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

好的，手掌对着额头。我只是在form 元素上没有dropzone 类。早些时候把它取下来尝试一下，忘记重新戴上。

Rar。