django.utils.datastructures.MultiValueDictKeyError DJANGO - ajax

Question

I have a form. When I post the form without using ajax, it works well. But when I use the ajax, I have an error like this;
django.utils.datastructures.MultiValueDictKeyError:
My codes are below that without using ajax. It works.
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>
My views.py codes are:
if request.method == "POST":
title = request.POST.get('title')
pic = request.FILES['picture']
query = Images_Table(title=title, pic=pic)
query.save()
My model codes are:
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)
Until here; everythings are normal, codes works. When I use ajax, I have an error. My HTML Form:
<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>
My ajax codes are:
$("#send_form").click(function(){
$.ajax({
url: '/adding/',
method:'post',
data: $("#add_form").serialize(),
headers: '{{ csrf_token }}',
success : function(){
alert('Success posted!');
}
});
});
Error code is below;
django.utils.datastructures.MultiValueDictKeyError: "'picture'"

Answer 1

I solved the problem by changing ajax.
$("#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!');
}
});
});