Dropzone 在上传前显示图标

Question

我正在尝试将 dropzone.js 用于 ASP.NET MVC 5 应用程序，但出现一些奇怪的显示行为。

正在将 Dropzone 添加到现有表单中。我将 autoProcessQueue 设置为 false，因为我希望用户必须单击 Submit 按钮。将文件添加到拖放区后，缩略图下方会出现两个图标。一个是复选框，另一个是 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 class。之前把它摘下来试了一下，结果忘了戴上。

rar.

Dropzone 在上传前显示图标

Dropzone displaying icons before upload

asp.net-mvc

jquery

dropzone.js