Cargar Varias Imágenes con JavaScript y PHP (recortando)

Este tema me tuvo bastante tiempo. Como pueden Ver este Sistema tiene una Galería de Imágenes y obviamente uno no quiere subir fotos uno por uno. Sino Seleccionar varias fotos a la vez directamente desde su camara si lo quiere. Ponerlos en una cola de CARGA de ARCHIVOS y que el Sistema se encargue de Subirlas Uno por Uno y como uno no quiere mostrar en su web una imagen muy grande. También queremos que el mismo sistema Recorte las imágenes a un tamaño compatible con todo monitor.

Para este trabajo hemos utilizado 2 Clases muy utiles. 

El Primero es una Clase en JavaScript llamada: Ajax Upload : Obviamente el nombre no concuerda si sabes de Ajax y Javascript. Ya que a traves de Ajax es imposible subir archivos a un hosting. Sin embargo este script emula todo y al final pareciera que subes los archivos con ajax.

El Otro Script está desarrollado en PHP: thumbs.php escrito por elchininet. Para mi es uno de los mejores y mas fáciles de Manipular. Aunque no e encontrado la forma de Recortar Imagenes y mantener su transparencia en caso de los PNG o GIF transparentes. Pero en la Galeria vamos a cargar FOTOS.

Con estas dos clases haremos el Siguiente Trabajo:

1. Seleccionar y Subir varias imagenes en cola de Subida. Mostrando el Porcentaje subido.
2. Al cargar la Imagen Recortarla y guardar el trabajo en una carpeta determinada.

Supongo que ya descargaste las clases de los link de los autores.

PASO 1: Para la Parte del CLIENTE: 

Cuando descargas Ajax Upload descomprime el ZIP y solo necesitaremos unos cuantos archivos. en el zip existen 3 carpetas server, client y test. Copiamos el fileuploader.js.js y la imagen loading.gif de la  Carpeta client. Y lo ponemos en la carpeta de nuestro proyecto que contenga las clases *.js. y el archivo fileuploader.css lo colocas en tu carpeta donde tienes los styles.

El Archivo demo.html muestra lo básico para operar ese script pero ahora haremos funciones mas avanzadas.

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/funciones.js" type="text/javascript"></script>
<script src="js/fileuploader.js" type="text/javascript"></script>
<link href="css/fileuploader.css" rel="stylesheet" type="text/css">

Obviamente debes direccionar a donde los pusiste.

<script>

function createUploader(){
var resultados = document.getElementById('resultados'); //div donde cargará el resultado al cargar una imagen
resultados.innerHTML = ''; //Limpia el DIV

var misfotos = window.opener.document.getElementById('img-galerias');
//En este caso abrí esta pagina con un popup y la respuesta quiero que cargue en la Pagina PADRE que abrió el POPUP.

var uploader = new qq.FileUploader({

debug: true,
element: document.getElementById('uploader'), //Este es el DIV contenedor del BOTON Buscar Imagenes
listElement: document.getElementById('lista'), //Este es el DIV que contendrá la Cola de Carga y mostrará las operaciones que se está ejecutando
action: 'uploader.class.php', //El Archivo PHP que recepcionará los archivos
maxConnections: 1, //Esto determina cuantos archivos a la vez se cargará. Te recomiendo 1 porque esto hizo la diferencia de todas las clases que probé. Todas subían de golpe en paralelo y mi Ancho de Banda de Subida era muy poca. Y esperé mas de 4 horas y al final tuve que cancelarlo. Si Subes 1 por 1 hará mucho mas rápido y dejarás también ejecutando la Tarea de recortar la imagen subida, mientras vas subiendo el Siguiente.
allowedExtensions: ['jpg','gif', 'png' ,'jpeg'], //Esto Filtra que archivos Subir si lo comentas aceptará todo tipo de archivo.
sizeLimit: 0 ,  //Limita el Tamaño Maximo de Archivo antes de subirla. ¿Que bueno no? Otros después de una larga espera de subir un archivo grande recien me avisan que mi File es muy grande. 
minSizeLimit: 0, //Tamaño minimo de Subida esto te puede ayudar si quieres evitar imagenes muy chicas de baja calidad.
onComplete: function(id, fileName, responseJSON){

//Esta Función es ejecutada cada vez que termina de subir un archivo
nombre = clean_url(fileName); //Esta es una función que hice para limpiar el nombre del archivo de espacios o caracteres no reconocidos como LINK
$(document).ready(function(){
//Como Verán aquí hacemos uso de nuestro queridísmo JQUERY
$.get("resize.php", { 'fn': clean_url(fileName)}, //Hacemos la referencia via $_GET al archivo PHP que se encargará de recortarlo al tamaño que queremos
function(data){
$('<div></div>').appendTo(misfotos).html('<img src="thumbnail.php?src=' + '<? echo $_SESSION['dir_upload'];?>' +nombre+'&height=55" />').addClass('thumbnails-albums50');
//Esta funcion de Jquery se encarga de mostrar la imagen cargada junto a las demas imágenes del album sin necesidad de Recargar toda la pagina.

});
});

},
messages: {
typeError: "No puedes cargar ese tipo de archivo. Solo {extensions} son permitidos.",
sizeError: "{file} <br> es muy grande, Solo puedes cargar hasta {sizeLimit}.",
minSizeError: "la Imagen: <br>{file}<br>es muy pequeño, Carga una imagen mayor {minSizeLimit}.",
emptyError: "{file} está vacío, Por Favor selecciona uno o varios archivos.",
onLeave: "The files are being uploaded, if you leave now the upload will be cancelled."
},

//Messages puedes eliminarlo el mensaje saldrá en Inglesesta es una forma de traducir sus mensajes de error.
showMessage: function(message){
resultados.innerHTML = message;//Muestra el Mensaje de Error dentro del DIV resultados
//alert(message);
}


});

}

window.onload = createUploader; //Esto inicializa la Clase.

</script>

<div id="uploader" >
<noscript>
<p>Javascript de tu explorador no esta activado.</p>
<!-- or put a simple form for upload here -->
</noscript>
</div>
<div id="lista" style="clear:both; list-style:none; padding: 10px;"></div>
<div id ="resultados" style="clear:both;"></div>

Eso es todo en la Parte Cliente. Se que no soy muy bueno explicando para los que hacen copy paste y quieren que funcione el script. pero traté de explicar al máximo sus funciones y en español.

Para la Parte del SERVER Pasaremos al Siguiente Artículo. Recortar con PHP Imágenes Subidas con Ajax Upload