如何启用拖放区选项?自动发现会中断拖放区功能

Question

所以，我尝试按照这里的解决方案：

拖放区图像上传选项:(不起作用

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

Dropzone.autoDiscover = false;

拖放

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

这是我的代码（标题中包含拖放区）：

<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>

所以，问题是，如何在不破坏默认外观的情况下为拖放区指定选项？

Answer 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>
}

Answer 2

四个选项：

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

如果您使用后面的步骤（按照其网站的建议），您还可以设置元素上的 URL 等选项，并通过以下方式合并选项：

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

Answer 3

我自己想通了。我对 ASP.NET Web 窗体相当陌生，忘记了 Javascript 是客户端的，因此引用的元素 ID 在客户端与服务器端不同。我查看了源代码，发现表单的 ID 是"aspnetForm"，所以我将选项代码更改为：

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

等。

现在它工作了！