Introducción

Hoy os traigo como subir ficheros con AJAX y PHP pudiendo filtrar que tipos de ficheros podemos subir.

Para ello vamos a utilizar una librería Javascript AjaxUpload.2.0.min.js (al final del Post podéis descargarla), yo no la he desarrollado y no encuentro quien la desarrollo.

Por ejemplo, un caso real que he tenido que desarrollar para un familiar es crear una utilidad que subiendo un archivo Excel(.XLS o .XLSX) con una serie de datos(nombre, dirección, localidad y otros datos más) nos genere una carta en PDF por cada uno de los registros.

Aquí os dejo una imagen de la utilidad.

undefined

Uso en PHP y HTML

 

<!--AJAXUPLOAD -->
<script language="javascript" src="AjaxUpload.2.0.min.js"></script>
<script language="javascript">
$(document).ready(function(){  
	var button = $('#upload_button'), interval;
	new AjaxUpload('#upload_button', {
		action: 'uploadExcel.php', //Indicamos el archivo php que guardara el fichero si es correcto.
		onSubmit : function(file , ext){
			if (! (ext && /^(xls|xlsx)$/.test(ext))){ //Indicamos las extensiones que nos interesan, en este caso xls y xlsx
				alert('Error: Solo se permiten archivo de Excel(xls o xlsx).');
				//Cancelamos la subida
				return false;
			} else {
				//Desabilitamos el boton una vez que el documento tiene la extension correcta
				this.disable();
				//En este paso podriamos mostrar un gif de cargando o un texto
				//$("#XLSFile").html('<center><img src="css/img/loading.gif" /></center>');
			}
		},
		onComplete: function(file, response){   
			//response: En este caso uploadExcel.php nos devuelve el nombre del fichero subido.
			$("#XLSFile").val(response);
			//Mostramos el nombre del fichero con el que se ha almacenado,
			//ya que en este caso el fichero real se pasa al siguiente proceso.
		}   
	});
});
</script>
<!--AJAXUPLOAD -->

<!--Codigo del campo del formulario -->
<div>
	<input name="XLSFile" id="XLSFile" type="hidden" >
	<div id="upload_button">
		<button class="botonVerde" id="profile_image_upload" type="button" >
			Selecciona el fichero Excel (XLS o XLSX)
			<span class="caret"></span>
		</button>
	</div>
</div>
<!--Codigo del Formulario -->

 

 

Ejemplo Practico

Como subir una imagen JPG y mostrarla con AJAX

Código de PHP del archivo upload.php
<?php
	//Declaramos el directorio de las imagenes
	$uploaddir = 'img/';
	
	//Sino existe el directorio lo creamos
	if (!is_dir($uploaddir)) {
   		mkdir($uploaddir);
	}
	//Vamos a renombrar el fichero por uno aleatorio para que nunca se machaquen y se pierdan las imagenes
	$file =  md5(basename($_FILES['userfile']['name'])).strrchr($_FILES['userfile']['name'],".");
	
	//Contruimos la ruta de la imagen
	$uploadfile = $uploaddir . $file;
	
	if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {				
		echo $uploadfile;//Devolvemos la ruta completa para poder visualizarla.
	} else {
		echo "error";
	}
?>

 

Código de PHP del archivo Formulario.php
<!--AJAXUPLOAD -->
<script language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script language="javascript" src="AjaxUpload.2.0.min.js"></script>
<script language="javascript">
$(document).ready(function(){  
	var button = $('#upload_button'), interval;
	new AjaxUpload('#upload_button', {
		action: 'upload.php', //Indicamos el archivo php que guardara el fichero si es correcto.
		onSubmit : function(file , ext){
			if (! (ext && /^(jpg)$/.test(ext))){ //Indicamos las extensiones que nos interesan, en este caso jpg
				alert('Error: Solo se permiten archivo de Imagen JPG.');
				//Cancelamos la subida
				return false;
			} else {
				//Desabilitamos el boton una vez que el documento tiene la extension correcta
				this.disable();
				//En este paso podriamos mostrar un gif de cargando o un texto
				$("#contenedorImagen").html('<img src="loading.gif" />');
			}
		},
		onComplete: function(file, response){   
			button.hide();
			//response: En este caso upload.php nos devuelve el nombre del fichero subido.
			$("#contenedorImagen").html('<img src="' + response + '" />');
		}   
	});
});
</script>
<!--AJAXUPLOAD -->

<!--Codigo del campo del formulario -->
<div>
	<div id="contenedorImagen"></div>
	<div id="upload_button">
		<button class="botonVerde" id="profile_image_upload" type="button" >
			Selecciona la imagen (JPG)
			<span class="caret"></span>
		</button>
	</div>
</div>
<!--Codigo del Formulario -->

 

Resultado