Javascript Django：用ajax和文件发送表单

我知道，我知道，在这个问题上已经有一些问题了，我相信我的想法，我已经尝试了很多东西，但仍然无法让它起作用

我有一个带有表单的页面，上传一个带有注释的img（比如一个文本区域和一个文件输入）。问题是，我不想为这个表单设置一个特定的页面，所以我在页面中有一个带有表单的popin。所以我决定用ajax（这样用户就可以留在页面上上传几张照片）

但我一直有一个错误，“注释字段是必需的”。看起来发送的表单是空的。以下文件和许多建议我就是这样做的：

Form.py

class UploadPhotoForm(ModelForm):

    class Meta:
        model = Photo
        fields = ['picture', 'comment']

    def __init__(self, *args, **kwargs):
        self.request = kwargs.pop("request", None)
        super(UploadPhotoForm, self).__init__(*args, **kwargs)

    def save(self):
        photo = super(UploadPhotoForm, self).save(commit=False)
        artist = Artists.objects.get(user=self.request.user)
        photo.artist = artist
        photo.save()
        return photo

views.py（处理表单的人：当我想制作ajax时，我更改了表单）：

而JS部分：

$('#upload_photo').submit(function(e){
    e.preventDefault();
    var csrftoken = getCookie('csrftoken');

    var data = new FormData($(this)[0]);
    data.append('csrfmiddlewaretoken', csrftoken);
    //data.append('comment', $(this).find('div.input-field').find('textarea').val());
    //data.append('photo', $(this).find('div.file-field').find('input:file')[0]);
    $.ajax({
        url: "/photo/upload",
        type: "POST",
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        },
        data: data,
        processData: false,
        contentTYpe: false,
        success: function(data) {
            if(data['code']== 1) {
                location.reload();
            }
            else {
                alert(data);
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });
});

看起来formData对象send只是一个空的东西，但是我已经阅读了文档和一些示例，我不知道我在这里做错了什么

您可以在评论中看到FormData对象的

append（）

方法。我试图将一个新的FormData对象声明为空，然后添加字段

在上一次尝试中，我在FormData对象中直接使用了CSRFToken，但仍然不起作用

---

如果有人能帮忙，那就太好了

不确定这是否是问题的原因，但您在

contentTYpe

中有一个输入错误-Javascript数组键区分大小写。该死。。。你说得对：）。谢谢你。

$('#upload_photo').submit(function(e){
    e.preventDefault();
    var csrftoken = getCookie('csrftoken');

    var data = new FormData($(this)[0]);
    data.append('csrfmiddlewaretoken', csrftoken);
    //data.append('comment', $(this).find('div.input-field').find('textarea').val());
    //data.append('photo', $(this).find('div.file-field').find('input:file')[0]);
    $.ajax({
        url: "/photo/upload",
        type: "POST",
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        },
        data: data,
        processData: false,
        contentTYpe: false,
        success: function(data) {
            if(data['code']== 1) {
                location.reload();
            }
            else {
                alert(data);
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });
});