Почему моя форма django не отправляется при отправке через AJAX?

Question

Я пытаюсь загрузить изображение через AJAX с видом Django.Вот моя 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: -

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/