programacion web, emarketing, econsulting, desarrollo web, optimizacion web, posicionamiento web, agencia de internet, sabemos de internet

09 de Septiembre 2010

.net Ajax Arzion asp.net c# css css2 Firefox google hotel inmobiliaria internet javascript jquery linux Mallorca maquetación melia microsoft mysql optimización Php Planeta Web programación web propiedades seo turismo ubuntu web xhtml

Contacto

Si tienes cualquier duda, consulta o sugerencia puedes mandarnos un email usando el siguiente formulario:

Este campo es requerido.

Por favor ingrese un email valido.

¿Como nos conoció? Google Otras Publicidad Recomendación de un amigo Referencia de otro sitio Yahoo Comentario

Este campo es requerido.

Hola a todos, esta vez voy a mostrar en un ejemplo muy sencillo un poquito mas de las extensas capacidades que posee el framework para JavaScript llamado JQuery.
Todos sabemos que la forma mas simple para subir un archivo a un servidor es usando (en mi caso por ejemplo) el array $_FILES en PHP, el problema es que para recibir un archivo hay que hacerlo por medio de un submit en formulario y eso conlleva a un refresco de la página en la que estamos. Bueno, hoy les ofrezco una alternativa muy rapida y fácil de implementar que con tan solo un plugin y la plataforma cargada ya podemos probar. Se trata de Ajax File Uploader, que como bien dice su nombre es una extension de la plataforma JQuery para enviar datos binarios al servidor en forma asincrónica.

Miremos este código:

function ajaxFileUpload(){

$.ajaxFileUpload(
    {
	url:'/ajax/test.php?nocache='+Math.Random(),
	secureuri:false,
	fileElementId: fileToUpload,
	dataType: 'json',
	success: function (data, status)
	{
	  alert(data.msg);
           /* mostramos un mensaje de éxito */
        },
        error: function (data, status, e)
	{
	  /* manejamos el error */
	}
});
   return false;
}

Para poder lanzar la funcion podemos ejecutarla en el evento onclick de un botón normal cuyo código HTML puede ser:

Upload

Y para apuntar el archivo ponemos:

Es muy importante que no olvidemos poner el enctype="multipart/form-data" dentro del

 

que contiene a ambos elementos.


Veamos ahora el posible código de "test.php":

	$error = "";
	$msg = "Exito!";
	$fileElementName = 'campoUpload';
	if(!empty($_FILES[$fileElementName]['error']))
	{
		switch($_FILES[$fileElementName]['error'])
		{

			case '1':
				$error = 'The uploaded file exceeds the upload_max_filesize directive in php.ini';
				break;
			case '2':
				$error = 'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form';
				break;
			case '3':
				$error = 'The uploaded file was only partially uploaded';
				break;
			case '4':
				$error = 'No file was uploaded.';
				break;

			case '6':
				$error = 'Missing a temporary folder';
				break;
			case '7':
				$error = 'Failed to write file to disk';
				break;
			case '8':
				$error = 'File upload stopped by extension';
				break;
			case '999':
			default:
				$error = 'No error code avaiable';
		}
	}elseif(empty($_FILES['fileToUpload']['tmp_name']) || $_FILES['fileToUpload']['tmp_name'] == 'none')
	{
		$error = 'No file was uploaded..';
	}else 
	{
			$msg .= " File Name: " . $_FILES['fileToUpload']['name'] . ", ";
			$msg .= " File Size: " . @filesize($_FILES['fileToUpload']['tmp_name']);
			//borramos el archivo de memoria por razones por razones de testeo
			@unlink($_FILES['fileToUpload']);		
	}		
	echo "{";
	echo				"error: '" . $error . "',\n";
	echo				"msg: '" . $msg . "'\n";
	echo "}";

Luego en el evento de success de nuestra funcion podemos poner un "alert(data.msg);" mostrando la salida de la variable $msg de nuestro archivo PHP (en este ejemplo el texto sería "Exito!"), o tambien podemos refrescar el contenido de un elemento DIV, en fin, el resto queda a criterio de cada uno.
Aqui les dejo el enlace al plugin para descarga directa:  CLICK.

Hasta la próxima...

Tags: Ajax, jquery, archivos, subida

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Agregar comentario
A continuación expresa tu comentario
Este campo es requerido.	Por favor ingrese un email valido.
Comentario Este campo es requerido.
Security code:	Enter code: