为什么 dropzone 选项无法加载？

Question

我的视图中有一个拖放区，并想设置一些选项来强制文件为 .zip。我还需要允许这些文件更大，并在返回时获取一些信息。这些选项似乎没有为我加载，并且 quecomplete 永远不会受到打击。

编辑.cshtml：

<div class="row">
  <div class="col-8">
    <form asp-action="UploadFiles" class="dropzone" id="versionFiles"> 
    </form>
  </div>
</div>


@section Scripts {
<script>
    $(document).ready(function () {
        Dropzone.options.versionFiles = {
            acceptedFiles: ".zip",
            maxFileSize: 2048,
            timeout: 600000,
            init: function () {
                this.on("queuecomplete", function (file, response) {
                    console.log(file);
                })
            }
        };

    })
</script>
}

编辑：固定超时

Answer 1

避免在document.ready(function(){ /* ... */ }) 中配置 Dropzone 选项。

要解决此问题，请按以下方式更改您的代码：

$(document).ready(function () { Dropzone.options.versionFiles = { 接受的文件：“.zip”， 最大文件大小：2048， 超时：600000， 初始化：函数（）{ this.on("queuecomplete", function (file, response) { console.log("sssssssssssss",file); }) } }; }); 罢工>

[编辑]：

原因是Dropzone.js 会自动发现所有带有dropzone 类的表单元素并自动附加到它。如果您通过document.ready(function(){/.../})配置选项，则不能保证在dropzone生效之前设置选项。

如果您确实需要在文档准备好后触发，您可以使用编程方式来确保顺序：

Dropzone.autoDiscover = false;           // disable auto discover

$(document).ready(function () { 
    Dropzone.options.versionFiles = {
        acceptedFiles: ".zip",
        maxFileSize: 2048,
        timeout: 600000,
        init: function () {
            this.on("queuecomplete", function (file, response) {
                console.log("xyz...",file);
            })
        }
    };
    $("#versionFiles").dropzone({ });   // trigger it
});