时间戳

首页 > 解决方案 > 如何在我的网络应用程序上正确实现 dropzone 元素？

javascript - 如何在我的网络应用程序上正确实现 dropzone 元素？

问题描述

我正在尝试实现一个 Dropzone 元素，以允许我的用户轻松拖放多个文件以上传到我的网络应用程序中。但是，我并不真正了解或不知道如何将源代码集成到我当前的解决方案中。有人可以帮我解决这个问题吗？

目前，我有一个 base.html 来存储所有前端库/依赖项，例如 bootstrap.min.css 和 jquery.min.js。基于这种理解，我对 dropzone.js 和 dropzone.css 做了类似的导入。但我似乎无法让它工作。

根文件夹中的“base.html”

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <!-- Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js" />
    <link rel="stylesheet" type="text/css" href="includes/css/basic.css" />
    <link rel="stylesheet" type="text/css" href="includes/css/dropzone.css" />
    <script type="text/javascript" src="includes/js/dropzone.js" /> 
    <script>
        Dropzone.autoDiscover = false;
        window.onload = function () {
            var dropzoneOptions = {
                dictDefaultMessage: 'Drop Here!',
                paramName: "file",
                maxFilesize: 2, // MB
                addRemoveLinks: true,
                init: function () {
                    this.on("success", function (file) {
                        console.log("success > " + file.name);
                    });
                }
            };
            var uploader = document.querySelector('#uploader');
            var newDropzone = new Dropzone(uploader, dropzoneOptions);
            console.log("Loaded");
        };
    </script>
    <!-- Font Awesome --> 
    <title>Market Data Terminal Analysis</title>
</head>
<body>
    {% include 'includes/_navbar.html' %}
    <div class="container-fluid">
        {% block content %}{% endblock content%}
    </div>
</body>

我将 dropzone.js 和 dropzone.css 分别存储在 root/includes/js 和 root/includes/css 中。

期待我的页面上有一个 dropzone 元素，但仍然没有出现。

标签： javascriptcssdropzone.js

解决方案

推荐阅读