Question

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

当前，我有一个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元素，但仍然没有出现。

Answer 1

DevTools failed to parse SourceMap: https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css.map
DevTools failed to parse SourceMap: https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.map
DevTools failed to parse SourceMap: https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css.map
DevTools failed to parse SourceMap: https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css.map
DevTools failed to parse SourceMap: https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.js.map
DevTools failed to parse SourceMap: https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js.map

这些是我在Chrome中查看控制台日志时遇到的错误。

如何在我的Web应用程序中正确实现dropzone元素？

1 个答案: