Javascript 在Django表单中包含Dropzone表单时无法完成POST

这绝对是我一直以来最具杀伤力的五大问题！ 我在Django有一个模型，运行良好。问题是，我想在这个表单中添加一个额外的字段——用于上传图像的small Dropzone.js区域。在给定的代码示例中，dropzone preview DIV正确地嵌入到主窗体中。当然，为了实现这一点，我以编程方式初始化了Dropzone

如果我注释myDropzone.processQueue（）submit按钮将常规表单提交到视图，但没有使用Dropzone上载的图像。但是，如果执行了

processQueue（）

，它将覆盖主表单提交操作，并且只提交图像。剩下的内容当然会被忽略

我只想在其余的输入字段中提交图像，我想在Django表单中嵌入Dropzone，因为如果我将整个表单设置为Dropzone，并在那里添加输入字段……整个表单显示为拖放区域，样式也会混乱

为了使它更复杂，我为图像提供了额外的DB表，但我的视图准备额外处理请求中的图像，并将它们处理到数据库中。 接下来，我不得不以一种丑陋的方式在Dropzone中手动提供CSRF（使用

参数：{..}

），因为Dropzone无法识别表单模板引擎中的CSRF（因为它显然是另一种形式）：(

以下是模板：

<h1 class="asdf-page-title">
    Add Type
</h1>
<form id="gift-form" class="dropzone-form" method="POST" enctype="multipart/form-data">
    {% csrf_token %}


    {{ g_form.title }}

    <p class="asdf-form-title">Select Type:</p>
    <div class="asdf-form-pic-select row collapse-outer-space ">
        {% for choice in g_form.asdf_type %}
            <div class="col-4">
                <label class="type-{{ choice.choice_label }}">
                    {{ choice.tag }}
                    <span>{% trans choice.choice_label %}</span>
                </label>
            </div>
        {% endfor %}
    </div>

    <p class="asdf-form-title">Price:</p>
    <div class="asdf-type row collapse-outer-space ">
        <div class="col-4">
            {{ g_form.total_price }}
        </div>
        <div class="col-8">
            {{ g_form.currency }}
        </div>
    </div>

    <p class="asdf-form-title">Description:</p>
    {{ g_form.description }}

    <div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div>

    <p>
        <input id="submit-btn" type="submit" value="{{ action_btn }}"
    </p>

</form>

<link href="{% static 'admin-users/js/ckeditor/samples/css/samples.css' %}" rel="stylesheet" type="text/css"/>
<link href="{% static 'admin-users/css/dropzone.css' %}" type="text/css" rel="stylesheet"/>
<script src="{% static 'admin-users/js/dropzone.js' %}"></script>
<script src="{% static 'admin-users/js/jquery-2.2.4.min.js' %}" type="text/javascript"></script>
<script src="{% static 'admin-users/js/ckeditor/ckeditor.js' %}" type="text/javascript"></script>
<script>
    Dropzone.autoDiscover = false;
    jQuery(document).ready(function() {

            var myyDropzone = new Dropzone("div#my-awesome-dropzone", {
                    url: "#",
                    params: {'csrfmiddlewaretoken': getCookie('csrftoken')},
                    autoProcessQueue: false,
                    addRemoveLinks: true,
                    maxFilesize: 256 * 4 * 2,
                    maxFiles: 3,
                    uploadMultiple: true,
                    parallelUploads: 10,

                    init: function() {
                        var myDropzone = this,
                            addButton = document.querySelector("#submit");

                        // First change the button to actually tell Dropzone to process the queue.
                        addButton.addEventListener("click", function(e) {
                            // Make sure that the form isn't actually being sent.
                            e.preventDefault();
                            e.stopPropagation();
                            myDropzone.processQueue();
                        });

                        // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
                        // of the sending event because uploadMultiple is set to true.
                        this.on("sendingmultiple", function() {
                            // Gets triggered when the form is actually being sent.
                            // Hide the success button or the complete form.
                        });
                        this.on("successmultiple", function(files, response) {
                            // Gets triggered when the files have successfully been sent.
                            // Redirect user or notify of success.
                        });
                        this.on("errormultiple", function(files, response) {
                            // Gets triggered when there was an error sending the files.
                            // Maybe show form again, and notify user of error
                        });
                    },
                    sending: function (file, xhr, formData) {
                        // Along with the file, shall I append all fields from the form above in the formData?
                    }
            });
    });
    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;
    }
</script>

添加类型
{%csrf_令牌%}
{{g_form.title}
选择类型：
{%用于g_形式的选择。asdf_类型%}
{{choice.tag}
{%trans choice.choice_label%}
{%endfor%}
价格：
{{g_form.total_price}}
{{g_form.currency}}
说明：
{{g_form.description}}

我们通过向服务器发出两个请求来解决这个问题：一个是针对常规Django表单及其所有数据的Post，另一个是针对上传图像（如果有的话）的Dropzone Ajax

这是通过将上传的
图像
添加到
Dropzone
的
sending
功能中的
formdata
来实现的

如果有任何上传的图像，将调用
myDropzone.processQueue（）
，否则我们将使用
$（“.dropzone form”）.submit（）在JavaScript中手动提交表单

如果执行了
myDropzone.processQueue（）
，那么我们将钩住
Dropzone
事件
successmultiple
并执行
$（“.Dropzone表单”）.submit（）
一秒钟后。我们为什么要这样做？Dropzone将等待所有图像上传，然后它将立即触发
successmultiple
。如果我们直接在那里提交表单，用户将错过Dropzone的精彩动画，该动画显示在所有上传的图像上放置绿色标记。动画持续时间约为10分钟现在我还没有找到比设置超时1秒更好的方法

代码如下：

Dropzone.autoDiscover = false;

if ($("#my-awesome-dropzone").length > 0){
    var myyDropzone = new Dropzone("#my-awesome-dropzone", {
        url: "some_url",
        autoProcessQueue: false,
        method: "post",
        addRemoveLinks: true,
        maxFilesize: 256 * 4 * 10,
        maxFiles: 3,
        uploadMultiple: true,
        parallelUploads: 10,

        init: function () {
            var myDropzone = this;
            var addButton = $("#submit-btn");

            // First change the button to actually tell Dropzone to process the queue.
            addButton.addEventListener("click", function (e) {
                // Make sure that the form isn't actually being sent.
                e.preventDefault();
                e.stopPropagation();
                if (myDropzone.getQueuedFiles().length > 0) {
                    myDropzone.processQueue();
                } else {
                    $(".dropzone-form").submit();
                }
            });

            this.on("successmultiple", function (files, response) {
                setTimeout(function () {
                    $(".dropzone-form").submit();
                }, 1000);
            });
        },
        sending: function (file, xhr, formData) {
            formData.append('csrfmiddlewaretoken', getCookie('csrftoken'));
            formData.append("image", file.name);
        }
    });
}

你解决了你的问题吗？是的，问题已经解决了，请检查我下面的答案。已经快一年了，所以我尝试粘贴和调整工作代码。你能尝试一下，让我知道你是否需要帮助或进一步解释吗？非常感谢！我刚刚更改了var addButton=$（“#submit btn”）；by addButton=document.querySelector（“#submit”）；谢谢，通过以下方式将我的字段添加到formData变量：formData.append（“description”、$（“#id_description”）.val（）；如果我们向服务器发出两个请求，我们将如何跟踪与哪个映像关联的记录？