como fazer upload de arquivos usando serialização jquery

Então eu tenho um formulário e estou enviando o formulário através do ajax usando a function de serialização jquery

serialized = $(Forms).serialize(); $.ajax({ type : "POST", cache : false, url : "blah", data : serialized, success: function(data) { } 

mas, então, se o formulário tiver um campo …. como faço para passar o arquivo no formulário usando este método de serialização ajax … imprimir $ _FILES não produz nada

Um arquivo não pode ser carregado usando o AJAX porque você não pode acessar o conteúdo de um arquivo armazenado no computador cliente e enviá-lo no pedido usando javascript. Uma das técnicas para conseguir isso é usar iframes ocultos. Há um bom plugin de formulário jquery que permite a AJAXify seus formulários e também suporta arquivos de upload . Então, usando esse plugin, seu código simplesmente ficará assim:

 $(function() { $('#ifoftheform').ajaxForm(function(result) { alert('the form was successfully processed'); }); }); 

O plugin cuida automaticamente de se inscrever no evento de submit do formulário, cancelando o envio padrão, serializando os valores, usando o método apropriado e processando os campos de upload de arquivos, …

Funciona para qualquer tipo de formulário

 $(document).on("submit", "form", function(event) { event.preventDefault(); var url=$(this).attr("action"); $.ajax({ url: url, type: $(this).attr("method"), dataType: "JSON", data: new FormData(this), processData: false, contentType: false, success: function (data, status) { }, error: function (xhr, desc, err) { } }); }); 

Você pode fazer o upload de arquivos via AJAX usando o método FormData. Embora o IE7,8 e o 9 não suportem a funcionalidade FormData.

 $.ajax({ url: "ajax.php", type: "POST", data: new FormData('form'), contentType: false, cache: false, processData:false, success: function(data) { $("#response").html(data); } }); 
  var form = $('#job-request-form')[0]; var formData = new FormData(form); event.preventDefault(); $.ajax({ url: "/send_resume/", // the endpoint type: "POST", // http method processData: false, contentType: false, data: formData, 

Funcionou para mim! basta definir processData e contentType False.

HTML5 apresenta a class FormData que pode ser usada para carregar arquivo com ajax.

O suporte ao FormData começa a seguir as versões dos navegadores de mesa. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

https://developer.mozilla.org/en/docs/Web/API/FormData/FormData

HTML

 

JavaScript

 var data = new FormData(); //Form data var form_data = $('#my_form').serializeArray(); $.each(form_data, function (key, input) { data.append(input.name, input.value); }); //File data var file_data = $('input[name="my_images"]')[0].files; for (var i = 0; i < file_data.length; i++) { data.append("my_images[]", file_data[i]); } //Custom data data.append('key', 'value'); $.ajax({ url: "URL", method: "post", processData: false, contentType: false, data: data, success: function (data) { //success }, error: function (e) { //error } }); 

PHP

 '; print_r($_POST); print_r($_FILES); echo '

'; die(); ?>