Ver Mensaje Individual
  #1 (permalink)  
Antiguo 30/03/2015, 00:05
KalSmith
 
Fecha de Ingreso: marzo-2014
Mensajes: 56
Antigüedad: 11 años
Puntos: 1
Pregunta Subir imagen desde formulario y crear vista previa (thumbnail)

Hola, como siempre he pedido ayuda con mis proyectos, creo que esta vez tengo la obligación moral de compartir un código que he creado a partir de varios códigos que he recopilado y acomodado a mi proyecto, el código que cree es para Subir una imagen al servidor, re dimensionar la imagen creando una vista previa o thumbnail el cual rellena los espacios con un fondo blanco.

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> 
Esta parte es la del código que sube la imagen y crea la redimension o thumbnail

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">&nbsp;</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($thumbnail255255255);
    
imagefill($thumbnail00$fondo);     
    
imagecopyresampled($thumbnail $imagen, ($nuevoAncho-$anchoImagen)/2, ($nuevoAlto-$altoImagen)/200$anchoImagen$altoImagen$ancho$alto);

function 
guardarImagen($imagen$nombre$tipo){
 
    switch (
$tipo){
        case 
"image/jpeg":
            
imagejpeg($imagen$nombre100); // 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$nombre9); // 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&iacute;as .jpg y .png</span></p>";
                  echo 
"<p align='center'><a href='subir_imagenes.php'><span style='font-size:28px;'>Volver atr&aacute;s</span></a></p>";
            }
      }                 
}
?></center>
</body>
</html>
Espero que pueda servirles en sus proyectos o si ven alguna mejora que puedan hacer bienvenida sea.

Saludos !