Upload asincrónicamente jquery

bNd170 · #1 (**permalink**) 24/02/2011, 18:48

Buenas gente, llevo un par de dias buscando plug-ins para jquery sobre subida de imagenes de manera asincronica con una barra de progreso.

A ser posible sin flash, unicamente AJAX y PHP.

¿Alguien ha usado alguno de estas caracteristicas?

esjuanma · #2 (**permalink**) 24/02/2011, 20:49

Con lo de la barra de progreso no voy a poder ayudarte, pero para empezar, tenés que saber que con ajax no podés hacer un upload.

De la forma que se logra un upload sin recargar la página, es usando iframes ocultos, y se les da el target del form a esos iframes.
Para que se entienda mejor, muestro este ejemplo:

Código HTML:

<html>

<body>

<form method="post" enctype="multipart/form-data" action="http://forosdelweb.com/" target="iframeUpload">

	Un simple input: <input type="text" />
	<input type="submit" value="enviar">

</form>

<iframe name="iframeUpload"></iframe>

</body>

</html>

Esto es como para empezar.

Iskra · #3 (**permalink**) 24/02/2011, 22:05

Si estas familiarizado con el uso de jQuery, busca el pluging jquery form con el puedes realizar un submit asincrono y te soporta el envio de input's de tipo file, asi no tendras que utilizar iframes ni ningun elemento adicional y tus scripts de carga de archivos tradicionales pueden funcionar con adecuaciones minimas :) si tienes dudas, con gusto te oriento en como hacerlo.

Saludos,

bNd170 · #4 (**permalink**) 25/02/2011, 10:04

Hola Iskra,

Pues aver, llevo dos dias buscando plugins y si, he encontrado algunos pero todos con flash.

Iskra · #5 (**permalink**) 25/02/2011, 14:29

Aqui esta una posible solucion:

La vista quedaria como lo muestro, hay que notar que incluyo tambien el script que configura la validacion del lado cliente, y las apis que agrego puedes conseguirlas en los sitios respectivos de jquery y los plugins.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax Upload</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript" src="js/jquery-1.4.3.min.js" ></script>
<script type="text/javascript" src="js/jquery.validate.min.js" ></script>
<script type="text/javascript" src="js/jquery.form.js" ></script>
<script>

function upload(){

if($("#frmUpload").valid())

$("#frmUpload").ajaxSubmit({
dataType:'xml',
success:function(error){

if($(error).text()=="0")
alert("Extio en Carga");
else
alert("Error en Carga");
},
resetForm:true
});

}

$(document).ready(
function(){

$('#frmUpload').validate(
{
rules:{
archivo:{
required:true
}
},
messages:{
archivo:{
required:'Cargue un archivo'
}
}
});

});

</script>
</head>

<body>

<form name="frmUpload" id="frmUpload" method="post" enctype="multipart/form-data" action="upload.php" >
<table>
<tr>
<td><label for="archivo">Archivo:</label></td>
<td><input type="file" id="archivo" name="archivo" value="" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="btnUpload" name="btnUpload" value="Guardar" onclick="upload();" /></td>
</tr>
</table>
</form>

</body>
</html>

El script de carga de archivos puede ser de la forma tradicional con la excepcion de que debemos considerar que debe enviar la respuesta al script de envio asincrono

<?php

function upload($inputName){

if(isset($_FILES[$inputName]))
$target_path = getcwd().DIRECTORY_SEPARATOR."files\\".$_FILES[$inputName]['name'];
else
return false;

if(move_uploaded_file($_FILES[$inputName]['tmp_name'], $target_path))
return true;
else
if($_FILES[$inputName]['error']==0)
return true;

return false;
}

$result = upload("archivo");
echo $result?"0":"1";

?>

Y he aqui una solucion simple al tu problema =)

bNd170 · #6 (**permalink**) 25/02/2011, 16:50

Buenas de nuevo, me gustaria hacer uso de UploadIfy ya que es el que mas se asemeja a lo que andaba buscando.

Llevo todo el dia buscando ejemplos que funcionen pero no hay manera, la parte cliente funciona pero parece que en flash no envia nada al PHP ya que he plagado el php de echos y no hace absolutamente nada. Los archivos no suben a donde deberian.

Alguien tiene informacion adicional sobre este plugin?
DEJO URL por si alguien quieres echarle un ojo
http://www.uploadify.com/