Cómo enviar un archivo con jQuery?

[fakulicious]

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!

[mayid]

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.

[fakulicious]

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.

[tredio]

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

[mayid]

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

[SergeMedina]

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

Saludos.