javascript - 加载表单后初始化 dropzone

Question

我正在使用jquery dropzone.js 。要加载我正在使用的表单 mustache像下面这样。但我无法在页面完全加载后初始化拖放区，因为当时没有加载任何表单。是否有一个选项可以在加载后初始化拖放区？

mustache 文件，格式如下:

<div class="col-lg-12">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>Dropzone Area</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-wrench"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="#">Config option 1</a>
                    </li>
                    <li><a href="#">Config option 2</a>
                    </li>
                </ul>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">
            <form id="my-awesome-dropzone" class="dropzone" action="#">
                <div class="dropzone-previews"></div>
                <button type="submit" class="btn btn-primary pull-right">Submit this form!</button>
            </form>
            <div>
                <div class="m text-right"><small>DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews: <a href="https://github.com/enyo/dropzone" target="_blank">https://github.com/enyo/dropzone</a></small> </div>
            </div>
        </div>
    </div>
</div>

加载 mustache 并初始化拖放区的函数:

<script>
    $( document ).ready(function() {
        // get the mustache
        loadDropZone();

        // HOW CAN I DO THIS AFTER THE DROPZONE FORM IS CREATED?
        // init dropzone
        Dropzone.options.myAwesomeDropzone = {

            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,

            // Dropzone settings
            init: function () {
                var myDropzone = this;

                this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    myDropzone.processQueue();
                });
                this.on("sendingmultiple", function () {
                });
                this.on("successmultiple", function (files, response) {
                });
                this.on("errormultiple", function (files, response) {
                });
            }

        }

    });

    function loadDropZone() {
        $.get(websiteUrl + 'storages/mustache/image-drop-zone.mst', function(template) {
            Mustache.parse(template); // speeds up future uses
            var rendered = Mustache.render(template);
            $('#block-container').append(rendered);
        });
    }
</script>

Answer 1

您应该以编程方式初始化 dropzone，而不是使用选项和自动发现功能。

应该看起来像这样:

<script>
    Dropzone.autoDiscover = false; // This is optional in this case

    $( document ).ready(function() {
        // get the mustache
        loadDropZone();

        // Now that the form is loaded you can initialize dropzone by creating an instance
        // init dropzone
        var myAwesomeDropzone = new Dropzone("form#my-awesome-dropzone", {

            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,

            // Dropzone settings
            init: function () {
                var myDropzone = this;

                this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    myDropzone.processQueue();
                });
                this.on("sendingmultiple", function () {
                });
                this.on("successmultiple", function (files, response) {
                });
                this.on("errormultiple", function (files, response) {
                });
            }

        }

    });

    function loadDropZone() {
        $.get(websiteUrl + 'storages/mustache/image-drop-zone.mst', function(template) {
            Mustache.parse(template); // speeds up future uses
            var rendered = Mustache.render(template);
            $('#block-container').append(rendered);
        });
    }
</script>