【问题标题】:Dropzone does not click and does not workDropzone 不点击也不工作
【发布时间】:2020-10-05 12:16:59
【问题描述】:

我的 Dropzone 不点击也不工作。

我已经查看了其他主题,但我的问题没有得到正确答案。

这是我的代码:

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename=dropzone_css) }}"/>
<script src="{{ url_for('static', filename=dropzone_js) }}"></script>

<div class="text-center">
    <div id="dropzone" class="m-3" style="max-width: 720px; display:none;">
        <form action="#" class="dropzone needsclick dz-clickable" id="demo-upload">
          <div class="dz-message needsclick">
            <button type="button" class="dz-button">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit; font-size: large;">test, test, test,test, test</font>
                </font>
            </button>
          </div>
        </form>
    </div>
    <div class="conteudo_envia_zona m-4" style="display:none">
    </div>
</div>

我该怎么办?

【问题讨论】:

  • 您需要做的第一件事是在浏览器中打开devtools并检查您需要调试的错误。

标签: javascript html jquery flask dropzone


【解决方案1】:

需要在 jquery 中创建一个 dropzone 实例:

$("#demo-upload").dropzone();

详情请见:https://www.dropzonejs.com/#create-dropzones-programmatically

【讨论】:

  • 不,不一定以编程方式创建实例。默认情况下,dropzone 选项“autodiscover”设置为 true。然后所有具有 css 类“dropzone”的页面元素都被转换为 dropzone 实例。请参阅 dropzone 网页上的配置部分。我相信您的渲染引擎无法正确渲染,或者 dropzone 文件不在预期的位置。
【解决方案2】:

首先,不清楚为什么要设置dropzone div元素的css属性display:none

<div id="dropzone" class="m-3" style="max-width: 720px; display:none;">

我使用了您的代码,它对我有用,没有任何问题: Your Dropzone on my localhost

我所做的唯一更改是设置 div 元素的 display:block 属性和 在本地绑定 Dropzone JS 和 CSS 文件。

我相信您的问题是,Dropzone 文件未正确加载。 请打开浏览器的开发者工具窗口,查看是否有 “控制台”选项卡上的一些错误。

【讨论】:

  • 我在控制台上发现了这个错误:[弃用] 主线程上的同步 XMLHttpRequest 已被弃用,因为它对最终用户的体验产生不利影响。如需更多帮助,请查看xhr.spec.whatwg.org。 window.XMLHttpRequest.open jquery.min.js:2 [Violation] 'load' 处理程序耗时 238ms jquery.min.js:2 [Violation] 'setTimeout' 处理程序耗时 1292ms
  • 这不是你在控制台上得到的错误。这只是关于同步 Ajax 请求的弃用警告。同步 ajax 调用会阻塞您的 JavaScript 运行时。如果同步 Ajax 请求花费的时间过长,则用户无法在此时间内与用户界面进行交互。 1.另一个问题你确定你的包装器DIV的css属性“display;none”是正确的吗?我会先删除这个 css 属性。 2.然后请检查您的LINK和SCRIPT标签是否正确渲染,以便绑定dropzone.css和dropzone.js文件。
猜你喜欢
  • 1970-01-01
  • 2017-10-11
  • 2017-08-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-02-09
  • 1970-01-01
相关资源
最近更新 更多