Submissão do formulário Ajax, arquivos não enviados

Estou tentando implementar o envio de formulários AJAX para meus formulários do Django.

Os arquivos estão sendo enviados sem o AJAX, então a lógica no servidor parece estar funcionando. e com ajax, o restante dos valores, exceto os arquivos, são enviados.

Aqui está o código que estou implementando,

Submissão do formulário AJAX

(function() { // using jQuery function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } var csrftoken = getCookie('csrftoken'); function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); } $.ajaxSetup({ crossDomain: false, // obviates need for sameOrigin test beforeSend: function(xhr, settings) { if (!csrfSafeMethod(settings.type)) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } } }); })(); 

jquery

 $('#save-form').live('submit', function(event) { // catch the form's submit event event.preventDefault(); $.ajax({ // create an AJAX call... data: $(this).serialize(), // get the form data type: $(this).attr('method'), // GET or POST url: '/save/', // the file to call success: function(response) { // on success.. $('#modalsave-form').html(response); // update the DIV } }); return false; }); 

Formulário HTML

  


{% csrf_token %}

Quando você envia um formulário HTML, ele geralmente envia os dados do formulário para o servidor usando headers HTML de dados GET ou POST . No entanto, quando você precisa enviar dados binários ou arquivos anexados para o servidor de forma eficiente, o HTML como parte de sua especificação tem um método diferente para enviar esses dados. enctype atributo enctype da tag

especifica qual método o navegador deve enviar os dados para o servidor. Para enviar arquivos, multipart/form-data é amplamente utilizado método de codificação.

Quando você tenta enviar um formulário sem ajax, o navegador envia os dados do arquivo para o servidor usando multipart/form-data codificação de multipart/form-data No entanto, quando você envia o formulário usando o ajax, faça o seguinte:

 data: $(this).serialize() 

Essa etapa não codifica dados da mesma maneira que o servidor espera os dados, portanto, seu ajax não funciona.

Para fazê-lo funcionar, em vez de enviar manualmente os dados do formulário, você deve enviar o formulário inteiro usando ajax. Fazê-lo manualmente é complicado, mais existem plugins que já fazem isso. Um desses plugins é o jQuery Form Plugin . Permite enviar o formulário inteiro usando ajax. A seguir, o código js, ​​que deve lhe dar uma idéia de como integrá-lo à sua configuração:

 $('#save-form').live('submit', function(event) { event.preventDefault(); $(this).ajaxSubmit({ url: '/save/', // the file to call success: function(response) { $('#modalsave-form').html(response); } }); return false; }); 

Outra opção é usar a interface FormData que elimina a necessidade de um plugin

https://developer.mozilla.org/pt-BR/docs/Web/API/FormData

Exemplo de código: (Adapte-se às suas necessidades)

`

 $('#fupload').click(function(){ var xhr = new XMLHttpRequest(); var token = $('input[name="csrfmiddlewaretoken"]').prop('value'); $.ajaxSetup({ headers: { "X-CSRFToken": token } }); var formData = new FormData($('form')[0]); formData.append('file',xhr.file); $.ajax({ url: '/myurl/', //server script to process data type: 'POST', xhr: function() { // custom xhr myXhr = xhr; //if(xhr.upload){ // check if upload property exists // xhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload //} return xhr; }, // Form data data: formData, //Ajax events success: function(server_response){ $( '#path' ).val("Success"); }, error: function(jqXHR, textStatus, errorThrown ){ $( '#path' ).val(errorThrown); }, //Options to tell JQuery not to process data or worry about content-type cache: false, contentType: false, processData: false }); }); 

`