Question

所以我有一个dropzone控件，一切正常。

以下代码：

＆＃13;

<head runat="server">
    <title></title>
    
    <script type="text/javascript" src="/content/js/jquery-1.11.2.min.js"  ></script>
        <link rel="stylesheet" href="/content/css/dropzone.css" />
    <script type="text/javascript" src="/content/js/dropzone.js"  ></script>

       <script type="text/javascript">

                Dropzone.autoDiscover = false;
                $(document).ready(function () {
                        $("#dZUploadPhoto").dropzone({
                        url: "/ashx/file-upload.ashx",

                        sending: function (file, xhr, formData) {
                            formData.append("type", "employee");
                        },
                        success: function (file, response) {
                        },
                        acceptedFiles: ".jpeg,.jpg,.png"
                    });
                });
          
    </script>

</head>
<body>
    <form id="form1" runat="server">
       <div runat="server" id="divFileUploadBackground">
            <div id="dZUploadPhoto" class="dropzone">
                <div class="dz-default dz-message">Click or drop photo here to upload</div>
            </div>
        </div>
    </form>
</body>

＆＃13;

加快页面加载速度消除渲染阻止javascript文件，我把'延迟＆＃39;在每个js文件上添加＆＃34; DOMContentLoaded＆＃34; on document.ready如下：

＆＃13;

<head runat="server">
    <title></title>
    
    <script type="text/javascript" src="/content/js/jquery-1.11.2.min.js" defer></script>
        <link rel="stylesheet" href="/content/css/dropzone.css" />
    <script type="text/javascript" src="/content/js/dropzone.js" defer></script>

       <script type="text/javascript">
           window.addEventListener('DOMContentLoaded', function () {
               (function ($) {

                Dropzone.autoDiscover = false;
                $(document).ready(function () {
                        $("#dZUploadPhoto").dropzone({
                        url: "/ashx/file-upload.ashx",

                        sending: function (file, xhr, formData) {
                            formData.append("type", "employee");
                           
                        },
                        success: function (file, response) {
                        },
                        acceptedFiles: ".jpeg,.jpg,.png"
                    });
                });
          
               })(jQuery);
           });
    </script>

</head>
<body>
    <form id="form1" runat="server">
       <div runat="server" id="divFileUploadBackground">
            <div id="dZUploadPhoto" class="dropzone">
                <div class="dz-default dz-message">Click or drop photo here to upload</div>
            </div>
        </div>
    </form>
</body>

＆＃13;

现在，我的代码没有使用2错误消息：

未捕获错误：未提供网址。
未捕获错误：Dropzone已经附加。

我一直在寻找高和低很低，仍然没有得到它。有人可以开导我并告诉我路吗？我哪里做错了？

Answer 1

问题在于，当您包含以下行时：

Dropzone.autoDiscover = false;

在DOMContentLoaded的侦听器内部，这会将此行的执行延迟到执行时，默认dropzone自动发现功能和默认配置已被使用。

只需将此行移到侦听器之外：

Dropzone.autoDiscover = false;

window.addEventListener('DOMContentLoaded', function () {
    /* Rest of the code */
}

实际上dropzone还有DOMContentLoaded的监听器，并在触发该事件时运行自动发现，但由于dropzone库首先在该事件上注册，因此它先触发比你的脚本，至少大多数流行的浏览器，如firefox的chrome都这样做。

添加＆＃39;延迟后，Dropzone无法正常工作在js文件

1 个答案: