Dropzone 在表单中指定可放置区域答案

【问题标题】：Dropzone specifying a droppable area in formDropzone 在表单中指定可放置区域
【发布时间】：2017-12-11 13:31:16
【问题描述】：

我想知道是否有办法在已初始化为 dropzone 元素的表单中指定一个区域。

我有这个标记

    <form class="vertical-flow vertical-flow--mini" id="new-support-ticket-form" method="post" enctype="multipart/form-data">
        //Have removed all other mark up  for brevity
        <div class="catalogue__upload">
            <div class="file-upload placeholder">
                <label class="is-hidden--text">@BackendText.Global_UploadFiles</label>
                <div class="file-upload__inner" aria-hidden="true" role="presentation">
                    <div class="file-upload__icon" aria-hidden="true" role="presentation">
                        <svgicon iconid="page-upload"></svgicon>
                    </div>
                    <div class="file-upload__content">
                        <h3 class="heading heading--quaternary file-upload__heading">@BackendText.Global_DragAndDropFile</h3>
                        <p class="file-upload__sub-heading">
                            @BackendText.Global_Or_Lowercase <label id="file-upload-browse" class="file-upload__label">@BackendText.Global_Browse_Lowercase</label>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <br/>
        <div class="button-group button-group--right">
            <button class="button button--color-orange button--medium" type="submit">Create ticket</button>
        </div>

    </form>

我通过编程方式创建拖放区。

        var dz = $("#new-support-ticket-form").dropzone({
            // The configuration we've talked about above
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            previewTemplate: '<div style="display:none"></div>',
            url: "@Url.Action("NewTicket")",
            clickable: "#file-upload-browse",

            // The setting up of the dropzone
            init: function() {
                var myDropzone = this;
            }
        });

我知道clickable 选项允许使用多个元素或单个元素来调出文件浏览器。但是我想知道是否有一种方法可以为文件而不是整个表单指定一个“可放置”的元素。我想要的元素是类catalogue__upload的div

我将整个表单作为 dropzone 的原因是我想与文件一起上传其他数据。问题的标记已被删除，但它基本上是一堆选择和文本框。

【问题讨论】：

标签： dropzone.js

【解决方案1】：

与其使用整个表单作为 dropzone，不如仅将元素设置为 dropzone 并使用 sending 事件处理程序向请求添加其他数据。

【讨论】：