Cómo crear miniaturas a la hora de subir múltiples imágenes en PHP y MySQL

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);
}
}
?>

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.