Foros del Web » Programando para Internet » Jquery »

Cómo enviar un archivo con jQuery?

Estas en el tema de Cómo enviar un archivo con jQuery? en el foro de Jquery en Foros del Web. Hola!! Cómo están?? Necesito saber como puedo hacer para enviar un archivo desde un script jQuery? Estuve investigando bastante y lo único que encontré fueron ...
  #1 (permalink)  
Antiguo 01/09/2010, 13:39
Avatar de fakulicious  
Fecha de Ingreso: mayo-2008
Ubicación: Mendoza
Mensajes: 140
Antigüedad: 14 años, 1 mes
Puntos: 2
Pregunta Cómo enviar un archivo con jQuery?

Hola!! Cómo están??

Necesito saber como puedo hacer para enviar un archivo desde un script jQuery?

Estuve investigando bastante y lo único que encontré fueron plugins para jQ, pero ninguno se adapta a lo que necesito, son solo para subir el archivo y listo. El tema es que yo tengo un formulario para cargar artículos (tipo blog) y lo que necesito es que en un solo proceso se envíe la imagen y los campos del formulario para procesarlo y guardar todo en la BD.

Probé pasando el valor con $.ajax() con el .val() del input file, pero eso solo me devuelve un string del nombre del archivo.

Cómo hago para poder pasar el archivo de manera tal que lo pueda recibir desde PHP con $_FILES?

Espero que alguien me pueda ayudar. Desde ya muchísimas gracias!
__________________
Facundo
http://www.creactivo.com.ar
  #2 (permalink)  
Antiguo 01/09/2010, 14:05
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 13 años, 3 meses
Puntos: 101
Respuesta: Cómo enviar un archivo con jQuery?

Tu formulario debe tener esto: enctype="multipart/form-data

Así: <form enctype="multipart/form-data" ...>

Además, un input para selección de archivos. Lo que resta en enviarlo por ajax?

Si se trata de más de un archivo, podes usar un plugin.
  #3 (permalink)  
Antiguo 01/09/2010, 14:15
Avatar de fakulicious  
Fecha de Ingreso: mayo-2008
Ubicación: Mendoza
Mensajes: 140
Antigüedad: 14 años, 1 mes
Puntos: 2
Respuesta: Cómo enviar un archivo con jQuery?

Mayid, gracias por responder!

Mira, tengo este código HTML:

Código HTML:
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
  <label for="foto"></label>
  <input type="file" name="foto" id="foto" />
  <input type="submit" name="subir" id="subir" value="Subir" />
</form> 
Y este javascript

Código HTML:
<script type="text/javascript">
$(document).ready(function(){
	$('#subir').click(function(){
		if($('#foto').val() == ''){
			alert('Seleccionar archivo');
		} else {		
			alert($('#foto').val());
			var imagen = $('#foto').val();
			$.ajax({
				url: 'prueba2.php',
				type: 'POST',
				data: 'imagen='+imagen,
				success: function(resultado){
					alert(resultado);
				}
			});
		}
		return false;
	});
});
</script> 
Y en el archivo prueba2.php hago el proceso de la imagen, la redimensiono y la guardo en un campo BLOB de la BD.

El problema es que lo único que envía es el nombre del archivo como un string, no envía la información binaria del archivo. Entonces en el php no recibe nada en $_FILES, me da un error que el array $_FILES está vacío. Y si recibo por $_POST solo me devuelve el nombre del archivo, pero no me devuelve el nombre, tamaño, contenido binario, etc.

No pongo el código PHP porque es un poco extenso y en realidad no tiene que ver con este foro. Además es un código que uso siempre, pero sin ajax, entonces se que ese código funciona bien. Los errores que me da ahora es porque no recibe el archivo.
__________________
Facundo
http://www.creactivo.com.ar
  #4 (permalink)  
Antiguo 01/09/2010, 14:26
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 13 años, 7 meses
Puntos: 66
Respuesta: Cómo enviar un archivo con jQuery?

no es posible subir archivos mediante AJAX, aunque si hay formas de simular ese comportamiento (es decir que no recargue la pagina), tienes que aplicar el uso de iframes para hacer eso.

puedes leer sobre eso aca link
  #5 (permalink)  
Antiguo 01/09/2010, 15:38
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 13 años, 3 meses
Puntos: 101
Respuesta: Cómo enviar un archivo con jQuery?

Veo. Claro, con var imagen = $('#foto').val(); no podes conseguir la foto en sí.

Mirá este uploader. En el primer ejemplo, adjuntas una imagen y la subís. Luego enviás el formulario:
http://pixeline.be/experiments/jqUploader/test.php
  #6 (permalink)  
Antiguo 06/09/2010, 08:04
Avatar de SergeMedina  
Fecha de Ingreso: septiembre-2007
Ubicación: Guadalajara, Jalisco
Mensajes: 459
Antigüedad: 14 años, 9 meses
Puntos: 20
Respuesta: Cómo enviar un archivo con jQuery?

Según mi opinión el form plugin de malsup Es de los mejores.

Saludos.
__________________
I see dead pixels

Etiquetas: enviar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:33.