javascript - 为什么我的 django 表单在通过 AJAX 提交时没有提交？

Question

我正在尝试使用 Django View 通过 AJAX 上传图像。这是我的 HTML 表单。

<form class="BackgroundImageUplaoder" action="/uplaod" id="form2">{% csrf_token %}
<input type="file" accept="/image*" name="image" multiple="false" />
<button type="submit">Uplaod</button>

而对应的ajax是:-

$(document).ready(function(){
$('#form2').submit(function(){
    var csrftoken = $("[name=csrfmiddlewaretoken]").val();

    var formdata={
        'image':$('input[name=image]').val(),

    };
    console.log("Formvalue is taken");
    console.log(formdata.image);

    $.ajax({
        type:'POST',
        url:'/Upload/Background/',
        data:formdata,
        dataType:'json',
        encode:true,
        headers:{
        "X-CSRFToken": csrftoken
        },
        processData:false,
        contentType:false,
    })

    .done(function(data){
        console.log(data);
        if(!data.success){//we will handle error
            if (data.password){
                console.log(data.password);
                    $('#password_error').text(data.password);
            }
            return false;

        }
            else{
                window.location='/';
            }

    });
event.preventDefault();
});
 });

Django View 是:-

def uploadbackground(request):
if request.method=="POST":
    form=BackgroundImageUplaod(request.POST,request.FILES)
    if form.is_valid():
        instance=form.save(commit=False)
        myobject=HomeScreen.objects.get(profile__user=request.user)
        if myobject:
            myobject.image=instance
            myobject.save()
            return JsonResponse({'success':True})
        else:
            sample=HomeScreen(profile__user=request.user,image=instance)
            sample.save()
            return JsonResponse({'success':True})
else:
    form=BackgroundImageUplaod()
return JsonResponse({'image':'An error is encountered while uplaoding','errors': [(k, v[0]) for k, v in form.errors.items()]})

控制台显示以下错误

根据我的观点，该表单未验证。验证我的表单后。我正在检查与当前登录用户相对应的实例是否存在。如果是，我将更新该实例，否则创建新对象

Answer 1

您的问题是您无法通过 AJAX JSON POST 发送图像，它只接受字符串和整数。您需要使用formData。

https://webkul.com/blog/send-images-through-ajax/