Subir imagen desde formulario y crear vista previa (thumbnail) Lo primero esta es la parte del formulario.
Código HTML:
<SCRIPT LANGUAGE="JavaScript"> function popUp(URL) { day = new Date(); id = day.getTime(); eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=1,statusbar=1,menubar=0,resizable=0,width=500,height=500,left = 710,top = 290');"); } </script> <tr valign="baseline"> <td nowrap="nowrap" align="right">IMAGEN:</td> <td><input type="text" id="img" name="StrImagen"/><a href="javascript:popUp('ok_subir_imagen.php');">[ Subir imagen ]</a> </td> </tr>
Código PHP:
<?php
if(!isset($_POST['enviar'])){
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Subir imagen</title>
</head>
<body>
<form method='post' action='?subida' enctype='multipart/form-data'>
<table width="100%" border="0" cellspacing="10">
<tr>
<td align="center"><h1 style="text-align:center;">Subir imagen</h1></td>
</tr>
<tr>
<td align="center">Selecciona la imagen<br /><input name="img1" type="file" /></td>
</tr>
<tr>
<td align="center"> </td>
</tr>
<tr>
<td align="center" ><input name='enviar' type='submit' value='Subir' />
</td>
</tr>
</table>
</form>
<?php
}else{
//SUBIMOS LA IMAGEN
if (is_uploaded_file($_FILES['img1']['tmp_name'])){
//recojo la imagen
$imagen = $_FILES['img1']['name'];
//Obtengo el nombre de la imagen y la extensión de la foto
$imagen1 = explode(".",$imagen);
if(($imagen1[1] == "jpg") || ($imagen1[1] == "png")){
//Genero un nombre aleatorio con números y se asigno la extensión obtenida anteriormente
$imagen2 = rand(0,9).rand(100,9999).rand(100,9999).".".$imagen1[1];
//Coloco la imagen en la carpeta correspondiente con el nuevo nombre
move_uploaded_file($_FILES['img1']['tmp_name'], "../img/".$imagen2);
//Asigno a la foto permisos
$ruta="../img/".$imagen2;
chmod($ruta,0777);
//aquí empieza el código de creación del thumbnail
$nombreImagen = $ruta; // archivo de origen
$nombreThumbnail="../img/tb/tb_".$imagen2; // archivo de destino
$nuevoAncho = 270;
$nuevoAlto = 194;
/**
* Crea un thumbail de un imagen con el ancho y el alto pasados como parametros,
* pero manteniendo las proporciones originales añadiendo bordes a la imagen.
*
* @param type $nombreImagen Nombre completo de la imagen incluida la ruta y la extension.
* @param type $nombreThumbnail Nombre completo para el thumbnail incluida la ruta y la extension.
* @param type $nuevoAncho Ancho para el thumbnail.
* @param type $nuevoAlto Alto para el thumbnail.
*/
// Obtiene las dimensiones de la imagen.
list($ancho, $alto) = getimagesize($nombreImagen);
// Comprueba que medida es menor para ponerle luego bordes.
if ($ancho > $alto){
$anchoImagen = $nuevoAncho;
$factorReduccion = $ancho / $nuevoAncho;
$altoImagen = $alto / $factorReduccion;
}
else{
$altoImagen = $nuevoAlto;
$factorReduccion = $alto / $nuevoAlto;
$anchoImagen = $ancho / $factorReduccion;
}
function abrirImagen($nombre){
$info = getimagesize($nombre);
switch ($info["mime"]){
case "image/jpeg":
$imagen = imagecreatefromjpeg($nombre);
break;
case "image/gif":
$imagen = imagecreatefromgif($nombre);
break;
case "image/png":
$imagen = imagecreatefrompng($nombre);
break;
default :
echo "Error: No es un tipo de imagen permitido.";
}
$resultado[0]= $imagen;
$resultado[1]= $info["mime"];
return $resultado;
}
// Abre la imagen original.
list($imagen, $tipo)= abrirImagen($nombreImagen);
// Crea la nueva imagen (el thumbnail).
$thumbnail = imagecreatetruecolor($nuevoAncho, $nuevoAlto);
$fondo=imagecolorallocate($thumbnail, 255, 255, 255);
imagefill($thumbnail, 0, 0, $fondo);
imagecopyresampled($thumbnail , $imagen, ($nuevoAncho-$anchoImagen)/2, ($nuevoAlto-$altoImagen)/2, 0, 0, $anchoImagen, $altoImagen, $ancho, $alto);
function guardarImagen($imagen, $nombre, $tipo){
switch ($tipo){
case "image/jpeg":
imagejpeg($imagen, $nombre, 100); // El 100 es la calidade de la imagen (entre 1 y 100. Con 100 sin compresion ni perdida de calidad.).
break;
case "image/gif":
imagegif($imagen, $nombre);
break;
case "image/png":
imagepng($imagen, $nombre, 9); // El 9 es grado de compresion de la imagen (entre 0 y 9. Con 9 maxima compresion pero igual calidad.).
break;
default :
echo "Error: Tipo de imagen no permitido.";
}
}
// Guarda la imagen.
guardarImagen($thumbnail, $nombreThumbnail, $tipo);
//MANDAMOS LA URL AL FORMULARIO
echo "<script>
window.opener.document.getElementById('img').value = '".$imagen2."';
alert('Imagen subida correctamente');
window.close();
</script>";
}else{
echo "<br><br><p align='center'><span style='color:red;font-size:28px;'>Solo se permiten fotografías .jpg y .png</span></p>";
echo "<p align='center'><a href='subir_imagenes.php'><span style='font-size:28px;'>Volver atrás</span></a></p>";
}
}
}
?></center>
</body>
</html> Saludos !
