Загрузить файлы через jquery post

Question

У меня есть html-форма, которую я пытаюсь загрузить, форма содержит файл изображения. Я отправляю форму, а затем предотвращаю ее использование по умолчанию через javascript, наконец, я делаю сообщение jquery (без обновления страницы) с информацией, имеющейся в форме. Тем не менее, файл изображения не отправляется. Вот мой HTML форма:

<form role="form" method="post" action="/client/client/update/image/" enctype="multipart/form-data" id="form-change-image"> 
<input type='hidden' name='csrfmiddlewaretoken' value='EXRSJGjjq3hMYd5b71UKcpEQ7XwPSonK' /> 
<input accept="image/*" class="hidden" id="id_image" name="image" type="file" /> 
</form> 

Вот это JQuery:

$(document).on('submit', '#form-change-image', function(e) { 
    var form; 
    e.preventDefault(); 
    form = $(this); 
    $.post(this.action, $(this).serialize()).done(function(data) { 
    $('#img_client').attr('src', image_preview); 
    }).fail(function(data) { 
    $('#main-row #result-alert').remove(); 
    $('#main-row').prepend('<div id="result-alert" class="alert alert-danger alert-dismissible" role="alert">' + '<button type="button" class="close" data-dismiss="alert" aria-label="Cerrar">' + '<span aria-hidden="true"><i class="fa fa-times"></i></span>' + '</button>' + '<strong><i class="fa fa-frown-o"></i>Lo sentimos.</strong> ' + data.responseJSON.response + '</div>'); 
    }); 
}); 

csrfmiddlewaretoken прилетает, как и ожидалось, изображение не появляется в request.FILES ни request.POST

Как изменить сообщение, чтобы изображение также появилось.

Answer 1

Попробуйте следующее:

$(document).on('submit', '#form-change-i1mage', function(e) { 

    e.preventDefault(); 

    $.post(this.action, new FormData(this)) 
     .done(function(data) { 
     $('#img_client').attr('src', image_preview); 
     }) 
     .fail(function(data) { 
     $('#main-row #result-alert').remove(); 
     $('#main-row').prepend('<div id="result-alert" class="alert alert-danger alert-dismissible" role="alert">' + '<button type="button" class="close" data-dismiss="alert" aria-label="Cerrar">' + '<span aria-hidden="true"><i class="fa fa-times"></i></span>' + '</button>' + '<strong><i class="fa fa-frown-o"></i>Lo sentimos.</strong> ' + data.responseJSON.response + '</div>'); 
     }); 
    }); 

Обратите внимание на new FormData(this) вместо $(this).serialize()

Если это не работает, использование $.ajax вместо $.post, так что вы можете установить contentType опции ложной