cómo hacer archivo de carga utilizando jQuery serialización

Question

Así que tienen una forma y estoy de enviar el formulario a través de Ajax con jQuery función de serialización

 serialized = $(Forms).serialize(); 

     $.ajax({ 

     type  : "POST", 
     cache : false, 
     url  : "blah", 
     data  : serialized, 
     success: function(data) { 

     } 

pero luego lo que si el formulario tiene un campo <input type="file"> .... cómo paso el archivo al formulario usando este método de serialización ajax ... impresión $ _FILES no genera nada

Answer 1

No se puede cargar un archivo con AJAX porque no puede acceder al contenido de un archivo almacenado en la computadora cliente y enviarlo en la solicitud usando javascript. Una de las técnicas para lograr esto es utilizar iframes ocultos. Hay un buen jquery form plugin que le permite AJAXify sus formularios y también supports file uploads. Así que usando este plugin su código simplemente tener este aspecto:

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

El plugin se encarga automáticamente de la suscripción de la submit caso de la forma, la cancelación de la presentación por defecto, la serialización de los valores, utilizando el método adecuado y manejar archivos cargar campos, ...

Answer 2

¡Ahora puede cargar archivos con Ajax!

Ejemplos:

https://stackoverflow.com/a/8758614/1072492

http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

Answer 3

Puede cargar archivos a través de AJAX utilizando el método FormData. Aunque IE7,8 y 9 no son compatibles con la funcionalidad de FormData.

$.ajax({ 
    url: "ajax.php", 
    type: "POST",    
    data: new FormData('form'), 
    contentType: false,  
    cache: false,    
    processData:false, 
    success: function(data) { 
     $("#response").html(data); 
    } 
}); 

Answer 4

Funciona para cualquier tipo de forma

$(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) 
     { 


     } 
    });   

}); 

Answer 5

HTML 5 introduce FormData clase que puede ser utilizada para presentar carga con el Ajax.

La compatibilidad con FormData comienza con las siguientes versiones de navegadores de escritorio. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5, Opera 12+

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

Answer 6

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, 

que trabajó para mí! simplemente configure processData y contentType False.

Answer 7

HTML

<form name="my_form" id="my_form" accept-charset="multipart/form-data" onsubmit="return false"> 
    <input id="name" name="name" placeholder="Enter Name" type="text" value=""> 
    <textarea id="detail" name="detail" placeholder="Enter Detail"></textarea> 
    <select name="gender" id="gender"> 
     <option value="male" selected="selected">Male</option> 
     <option value="female">Female</option> 
    </select> 
    <input type="file" id="my_images" name="my_images" multiple="" accept="image/x-png,image/gif,image/jpeg"/> 
</form> 

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

<?php 
    echo '<pre>'; 
    print_r($_POST); 
    print_r($_FILES); 
    echo '</pre>'; 
    die(); 
?>