如何启用 Dropzone 选项？ autoDiscover 会破坏 Dropzone 功能。答案

【问题标题】：How do you enable Dropzone options? autoDiscover breaks Dropzone functionality.如何启用 Dropzone 选项？ autoDiscover 会破坏 Dropzone 功能。
【发布时间】：2015-07-06 01:33:16
【问题描述】：

所以，我在这里尝试了以下解决方案：

Dropzone image upload options not working :(

但是，每当我提供选项时：

        Dropzone.autoDiscover = false;

dropzone 从显示默认的拖放外观变为仅显示带有“浏览”按钮的文本。

这是我的代码（dropzone 包含在标题中）：

<script type="text/javascript">
        $(document).ready(function () {

            Dropzone.autoDiscover = false;
            $("#uploadme").dropzone({
                maxFilesize: 5000,
                dictDefaultMessage: "Drop your file here to upload (multiple files require being zipped)",
                uploadMultiple: false,
                addRemoveLinks: true
            });

        });
    </script>

    <h5>Test space for FTP</h5>
    <asp:Label ID="lblError" runat="server"></asp:Label>

    <div class="mainContent">
        <form runat="server" method="post" enctype="multipart/form-data"
            class="dropzone"
            id="ftpUpload">
            <div class="fallback" id="uploadme">
                <input type="file" name="file" multiple />
                <input type="submit" value="Upload" />
            </div>
        </form>
    </div>

那么，问题是，如何在不破坏默认外观的情况下为 dropzone 指定选项？

【问题讨论】：

标签： javascript html dropzone.js

【解决方案1】：

祝你好运

@{
}

<div id="dropzone">
    <form action="/Photo/Upload" class="dropzone" id="uploader" enctype="multipart/form-data"></form>
</div>

@section Styles{
    <link rel="stylesheet" type="text/css" href="~/lib/dropzone/dist/basic.css" />
    <link rel="stylesheet" type="text/css" href="~/lib/dropzone/dist/dropzone.css" />

}
@section Scripts{
    <script src="~/lib/dropzone/dist/dropzone.js"></script>

    <script>
        Dropzone.autoDiscover = false;
        window.onload = function () {

            var dropzoneOptions = {
                dictDefaultMessage: 'Drop Here!',
                paramName: "file",
                maxFilesize: 2, // MB
                addRemoveLinks: true,
                init: function () {
                    this.on("success", function (file) {
                        console.log("success > " + file.name);
                    });
                }
            };
            var uploader = document.querySelector('#uploader');
            var newDropzone = new Dropzone(uploader, dropzoneOptions);

            console.log("Loaded");
        };
    </script>
}

【讨论】：

是的。这很满意！

【解决方案2】：

四个选项：

不要在表单中使用.dropzone 类，这样自动发现就不会发现它。如果你想使用默认的 CSS，那会搞砸你
使用Dropzone.autoDiscover = false;
通过设置 Dropzone.options.${formname} 访问加载后的选项，其中 formname 是表单的驼峰式 ID。
加载后通过附加到元素的 dropzone 属性访问选项。
document.querySelector(formname).dropzone.options
您可以通过索引访问它：Dropzone.instances[0].options

如果您使用后面的步骤（如他们的网站推荐的那样），您还可以设置元素上的 URL 等选项，并通过以下方式合并选项：

let dz = document.querySelector(formname).dropzone
dz.options = { ...dz.options, ...{ myopts } }

【讨论】：

【解决方案3】：

我自己想通了。我对 ASP.NET Web 表单还很陌生，忘记了 Javascript 是客户端，因此引用了客户端与服务器端不同的元素 ID。我查看了源码，发现form的ID是“aspnetForm”，所以我把options代码改成：

Dropzone.options.aspnetForm = {
            uploadMultiple: false,
            maxFiles: 1,
            maxFilesize: 5000,

等等

现在可以了！

【讨论】：