未捕获的错误：Dropzone 已附加答案

【问题标题】：Uncaught Error: Dropzone already attached未捕获的错误：Dropzone 已附加
【发布时间】：2016-03-12 11:54:44
【问题描述】：

使用 asp.net 中的 Dropzone 插件在许多页面中进行上传，我尝试将脚本放入用户控件中以便多次使用它，但我收到此错误：未捕获错误：Dropzone 已附加。我做了很多搜索，我发现了一些没有解决我的问题的解决方案，例如添加 Dropzone.autoDiscover = false;或 Dropzone.options.myAwesomeDropzone = false; 这是用户控件中包含的脚本：

<script type="text/javascript">

$(document).ready(function () {
    var currentDropzoneContent = '#<%=DropContent.ClientID %>';
    var currentDropzone = 'div#<%=dropzonefile2.ClientID %>';
    var dzMessage = $(currentDropzone).children('.dz-message');
    // Dropzone
    $(currentDropzone).dropzone({
        url: "/AdminAjax/FileManager/UploadFile",
        clickable: false,
        createImageThumbnails: true,
        acceptedFiles: "image/*",
        maxFiles: 1,
        accept: function (file, done) {
            done();
        },
        init: function () {
            // drop
            this.on("sending", function (file, xhr, data) {
                var folderValue = $(currentDropzoneContent + " .typeDrop input:checked").val();
                data.append("folderName", folderValue);
            });

            this.on("drop", function (e) {
                dzMessage.text('Drag image here');
            });
            this.on("dragleave", function () {
                dzMessage.text('Drag image here');
            });
            this.on("dragover", function () {
                dzMessage.text('Drop image here');
            });
            // complete
            this.on("complete", function (file) {

            });
            // canceled
            this.on("canceled", function () {
            });
            // success
            this.on("success", function (file, response) {

                this.removeFile(file);
                if ($.trim(response) != "") {
                    var imagePreview = '<%= ImagePreview %>';
                    var imageField = '<%= ImageField %>';
                    $('img#' + imagePreview).attr("src", response + '.ashx?bgcolor=E5E5E5&height=120&width=120');
                    $('#' + imageField).val(response);
                }

            });
            this.on('addedfile', function (file) {

            });

            // error
            this.on("error", function (file, response) {
                this.removeFile(file);
            });
        }
   });
});

这是 div 的代码 html，我将文件放到其中进行上传

<div class="mws-form">
    <div class="mws-form-block">
        <div class="mws-form-row">
             <div class="mws-form-item">
                <div id="DropContent" runat="server" class="mws-ui-button- radio">
                    <asp:RadioButton ID="Categories" CssClass="typeDrop" GroupName="typeDrop" runat="server"
                        Text="Categories" />
                    <asp:RadioButton ID="Products" CssClass="typeDrop"  GroupName="typeDrop" runat="server"
                        Text="Products" />
                    <asp:RadioButton ID="Banners" CssClass="typeDrop"     GroupName="typeDrop"  runat="server"
                        Text="Banners" />
                    <asp:RadioButton ID="Manufacturers" CssClass="typeDrop" GroupName="typeDrop"  runat="server"
                        Text="Manufacturers" />
                </div>
            </div>
        </div>
    </div>
</div>
<div ID="dropzonefile2" class="dropzonefile1 dropzone1 needsclick1 dz- clickable1 fade well" runat="server">
    <div class="dz-message needsclick custText" >
        Drag image here</div>
</div>

谢谢！

【问题讨论】：

标签： jquery asp.net dropzone.js

【解决方案1】：

你必须把 autoDiscover 选项放在 $(document).ready 之前，比如：

//Dropzone Configuration
Dropzone.autoDiscover = false;

$(document).ready(function(){

  // Pre init code
  var currentDropzoneContent = '#<%=DropContent.ClientID %>';
  var currentDropzone = 'div#<%=dropzonefile2.ClientID %>';
  var dzMessage = $(currentDropzone).children('.dz-message');

  // Dropzone manual init
  $(currentDropzone).dropzone({
     url: "/AdminAjax/FileManager/UploadFile",
     clickable: false,
     ...
  });
});`

【讨论】：