django.utils.datastructures.MultiValueDictKeyError DJANGO

Question

Ich habe ein Formular. Wenn ich das Formular ohne Ajax poste, funktioniert es gut. Aber wenn ich den Ajax benutze, habe ich einen Fehler wie diesen;

django.utils.datastructures.MultiValueDictKeyError: 

Meine Codes sind darunter, ohne Ajax zu verwenden. Es klappt. HTML Form:

<form id="add_form" action="/adding/" method="post" enctype="multipart/form-data"> 
    <input type="text" name="title"> 
    <input type="file" name="picture"> 
    <button type="submit" id="send_form" value="ok">Ok</button> 
</form> 

Meine views.py Codes sind:

if request.method == "POST": 
    title = request.POST.get('title') 
    pic = request.FILES['picture'] 
    query = Images_Table(title=title, pic=pic) 
    query.save() 

Meine Modellcodes sind:

class Images_Table(models.Model): 
    title = models.CharField(max_length=70, blank=True, null=True) 
    pic = models.FileField(upload_to='images_folder', blank=True, null=True) 

Bis hier; alles ist normal, Codes funktionieren. Wenn ich Ajax benutze, habe ich einen Fehler. Mein HTML-Formular:

<form id="add_form" method="post" enctype="multipart/form-data"> 
    <input type="text" name="title"> 
    <input type="file" name="picture"> 
    <button id="send_form" value="ok">Ok</button> 
</form> 

Meine Ajax-Codes sind:

$("#send_form").click(function(){ 
    $.ajax({ 
    url: '/adding/', 
    method:'post', 
    data: $("#add_form").serialize(), 
    headers: '{{ csrf_token }}', 
    success : function(){ 
     alert('Success posted!'); 
    } 
    }); 
}); 

Fehlercode ist unten;

django.utils.datastructures.MultiValueDictKeyError: "'picture'" 

Answer 1

Ich löste das Problem, indem ich Ajax änderte.

$("#send_form").click(function(){ 
    var file_data = $('#picture').prop('files')[0]; 
    var form_data = new FormData($('form').get(0)); 
    form_data.append('file', file_data); 
    $.ajax({ 
    url: '/adding/', 
    method:'post', 
    cache: false, 
    contentType: false, 
    processData: false, 
    data: form_data, 
    headers: {'X-CSRFToken': '{{ csrf_token }}'}, 
    success : function(){ 
     alert('Success posted!'); 
    } 
    }); 
});