Las miniaturas son réplicas de imágenes grandes, pero en tamaño reducido. Debido a su pequeño tamaño, son ideales para mostrarlas en la web en lugar de las originales y así mejorar la velocidad de carga. Esta funcionalidad, es necesario en todo tipo de aplicaciones web, tanto en proyectos pequeños como en grandes portales. Es por eso, que en este tutorial te mostraremos a crear miniaturas dinámicamente cuando subas múltiples imágenes en PHP y MySQL. Además de crear la miniatura, la mostraremos en una preview junto a la imagen original. ¿Todo claro? Pues allá vamos...
Una vez explicado esto, esta será la estructura de nuestro proyecto:
- index.php
- form_submit.js
- upload.php
- functions.php
Crear el formulario de subida de imágenes
Antes que nada, en el fichero index.php tendremos que crear el formulario de subida de imágenes cuyo action redirija al archivo upload.php
<form method="post" name="upload_form" id="upload_form" enctype="multipart/form-data" action="upload.php"> <label>Choose Multiple Images to Upload</label> <br> <br> <input type="file" name="upload_images[]" id="image_file" multiple > <div class="file_uploading hidden"> <label> </label> <img src="uploading.gif" alt="Uploading......"/> </div> </form> <div id="uploaded_images_preview"></div>
Gestionar la subida de las imágenes
En form_submit.js gestionaremos el submit del formulario mediante el plugin jQuery form en el evento change para enviar el formulario a upload.php cuando se haya seleccionado la imagen.
$(document).ready(function(){
$('#image_file').on('change',function(){
$('#upload_form').ajaxForm({
target:'#uploaded_images_preview',
beforeSubmit:function(e){
$('.file_uploading').show();
},
success:function(e){
$('.file_uploading').hide();
},
error:function(e){
}
}).submit();
});
});
Crear las miniaturas
Finalmente en upload.php gestionaremos el hecho de subir múltiples imágenes y crear las miniaturas mediante la función createThumbnail().
<?php
include_once("functions.php");
$uploaded_images = array();
$thumb_width = 100;
$thumb_height = 90;
$upload_dir = 'uploads/';
$upload_dir_thumbs = 'uploads/thumbs/';
foreach($_FILES['upload_images']['name'] as $key=>$val){
$filename = $_FILES['upload_images']['name'][$key];
$extension = end(explode(".", $filename));
$filename = "demo_image.".$extension;
$upload_file = $upload_dir.$filename;
if(move_uploaded_file($_FILES['upload_images']['tmp_name'][$key],$upload_dir.$filename)){
createThumbnail($filename, $thumb_width, $thumb_height, $upload_dir, $upload_dir_thumbs);
}
}
?>
Hemos creado la siguiente función en el functions.php para crear las miniaturas de las imágenes cargadas.
<?php
function createThumbnail($filename, $thumb_width, $thumb_height, $upload_dir, $upload_dir_thumbs) {
$upload_image = $upload_dir.$filename;
$thumbnail_image = $upload_dir_thumbs.$filename;
list($width,$height) = getimagesize($upload_image);
$thumb = imagecreatetruecolor($thumb_width,$thumb_height);
if(preg_match('/[.](jpg|jpeg)$/i', $filename)) {
$image_source = imagecreatefromjpeg($upload_image);
} else if (preg_match('/[.](gif)$/i', $filename)) {
$image_source = imagecreatefromgif($upload_image);
} else if (preg_match('/[.](png)$/i', $filename)) {
$image_source = imagecreatefrompng($upload_image);
} else {
$image_source = imagecreatefromjpeg($upload_image);
}
imagecopyresized($thumb,$image_source,0,0,0,0,$thumb_width,$thumb_height,$width,$height);
if(preg_match('/[.](jpg|jpeg)$/i', $filename)) {
imagejpeg($thumb,$thumbnail_image,100);
} else if (preg_match('/[.](gif)$/i', $filename)) {
imagegif($thumb,$thumbnail_image,100);
} else if (preg_match('/[.](png)$/i', $filename)) {
imagepng($thumb,$thumbnail_image,100);
} else {
imagejpeg($thumb,$thumbnail_image,100);
}
}
?>