AJAX

AJAX

Subir archivos o/u fotos por medio de AJAX al servidor

Tradicionalmente la subida de fotos o/u archivos lo hacen o lo que conocemos en una forma de formulario que lo enviamos por medio de POST hacia el servidor. Correcto?

Caso #1: supongamos que deseamos subir información plana pero al mismo tiempo queremos enviar imágenes o/u archivos. esto se vuelve un problema con el método tradicional de AJAX el cual solo envía datos planos, y luego de enviar los datos planos se tiene que enviar otro AJAX con los archivos. 

AJAX para envio post info plana

$.ajax({
url:'',
type:'post',
dataType:'json',
 data:{
   data:data
 }
success:function(respuesta){

}
});


Lo cual no obliga a utilizar una solución un poco tediosa, pero funcional, enviar primero los datos planos por AJAX luego en el success del AJAX enviar el formulario con los datos de los archivos, una solución que no es muy amigable y aparte de eso mata el concepto de AJAX porque el post del formulario hace que se refresque la pagina, lo que tanto tratamos de evitar con AJAX.


Solución del caso #1

fromData

Bueno en resumidas cuentas no nos olvidamos totalmente del formulario, solo que esta vez lo vamos a utilizar este OBJETO de jquery.

Declarar un formData

Declaración

var formData = new FormData();


Agregar datos aun formData

Agregar

formData.append('dataName','Carlos');


dataName  -> nombre o identificador dato
Carlos        -> Data o información.

¿Pero como obtener la información de un archivo?

paciencia ya estamos llegando....

Regularmente para poder seleccionar un archivo o/u foto tienes que agregar una etiqueta "input file"

Etiqueta input file

<input type="file" id="archivos"/>

Para obtener la información  que contiene el input file hacemos lo siguiente.

Codigo

$('#archivos')[0].files[0];

Ahora la adjuntamos al OBJETO formData

Codigo

formData.append('fileName',$('#archivos')[0].files[0]);

Codigo para subir archivos y texto plano de Ajax

Codigo

$.ajax({
url:'',
type:'post',
dataType:'json',
data:formData,
contentType:false,
processData:false,
success;function(respuesta){

}
});

Si nos ponemos a ver que fue lo que cambio del código de AJAX tradicional son las siguientes tres condiciones:

• contentType : false
• processData: false
• data:formData

Con esto vamos a lograr subir tanto texto plano con archivos en mismo AJAX.

Nota: Tomar en cuenta que cuando recolecten $_POST[ ] de lado de php, los nombres que pusieron en los APPEND del fromData son los identificadores.

por ejemplo:

JavaScript

formData.append('fileName', $('#archivos')[0].files[0]);

Tipo FILES -> archivos

PHP

$_FILES['fileName'];


JavaScript

formData.append('dataName','Carlos');

Tipo POST -> texto plano

PHP

$_POST['dataName'];


ejemplo completo:

javaScript

var formData = new FormData();

formData.append('doctor_id','5');

formData.append('paciente_id','10');

formData.append('descripcion_caso','Todo me duele');

formData.append('fileName', $('#archivos')[0].files[0]);

$.ajax({

url: '',

type: 'post',

data: formData,

dataType: 'json',

contentType: false,

processData: false,

success: function(respuesta) {

}

});

Cualquier duda den clic en la pestaña contacto.