Question

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

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

谢谢！

Answer 1

您必须在$（document）.ready之前添加autoDiscover选项，如：

//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,
     ...
  });
});`

未捕获的错误：Dropzone已经附加

1 个答案: