带有表单输入的 Dropzone.js

Question

这是我的问题：我想在用户添加文件时添加输入，但是当我发送文件时没有任何反应，看起来我调用了错误的函数。 这是我的 html/js（顺便说一句，这是一个 django 模板）代码：

<form id="myDropzone" action="{% url 'import' %}" method="POST" class="dropzone text-center"> <div id="form_import_div"> </div> <div class="fallback"> </div></form>

这里是 dropzone 选项代码：

 <script type="text/javascript">
       // using jQuery
            function getCookie(name) {
                var cookieValue = null;
                if (document.cookie && document.cookie !== '') {
                    var cookies = document.cookie.split(';');
                    for (var i = 0; i < cookies.length; i++) {
                        var cookie = jQuery.trim(cookies[i]);
                        // Does this cookie string begin with the name we want?
                        if (cookie.substring(0, name.length + 1) === (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }
            var csrftoken = getCookie('csrftoken');
            ask_job_type(csrftoken);
           $("#myDropzone").dropzone({
            url:"{% url 'dashboard/import' %}",
            maxFilesize: 5000,
            addRemoveLinks : true,
            dictDefaultMessage: "Drop your log files here or click to upload",
            dictResponseError: 'Error uploading file!',
            autoQueue:false,
            autoProcessQueue:false,
            maxFiles: 1,
            headers: {
                'X-CSRFToken': csrftoken
            },
            init : function() {
                var myDropzone = this;
                $("#btn_upload").click(function (e) {
                    e.preventDefault();
                    myDropzone.processQueue();
                });

                this.on('sending', function(file, xhr, formData) {
                    var data = $('#myDropzone').serializeArray();
                    $.each(data, function(key, el) {
                        formData.append(el.name, el.value);
                    });
                });
                this.on("successmultiple", function(files, response) {
                  alert("success");
                  alert(response);
                });
                this.on("success", function(files, response) {
                  alert("success");
                  alert(response);
                });
                this.on("errormultiple", function(files, response) {
                    console.log(response);
                });

            },
            success: function (file, response) {
                location.reload();
                this.removeFile(file); //todo discuter de quoi faire
            }

        });
</script>

注意： ask_job_type() 只是对添加所有输入元素的 js DOM 文档函数的调用。 我的提交按钮的 ID 为“btn_upload”

我不知道该怎么做，我看过这样的教程： https://gitlab.com/meno/dropzone/wikis/upload-all-files-with-a-button 但没有任何工作

Answer 1

Add these scripts firstly
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
//then for dropdown 
<script>
$(document).ready(function(){
    $(".dropdown-toggle").dropdown();
});
</script>