[APORTE] Cargar una o varias imagenes a la BD y generar un thumbnail o miniatura

loncho_rojas · #1 (**permalink**) 27/09/2010, 15:35

aqui un aporte que hace lo sigueinte:

- Crea varios campos INPUT FILE dinamicamente con Javascript (aporte de Cristalab)

- Envia las URL de las imagenes a la BD

- Envia las imagenes a una carpeta del servidor

- Crear una carpeta llamada THUMB dentro de la carpeta del servidor

- Crear y guarda una miniatura de cada imagen dentro de la carpeta THUMB

Espero les sirva, sino funciona, pues modifiquenlo a gusto

loncho_rojas · #2 (**permalink**) 27/09/2010, 15:39

cargar.html

Código HTML:

<!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>Cargar Archivos</title>

<script type="text/javascript">
var numero = 0; //Esta es una variable de control para mantener nombres
            //diferentes de cada campo creado dinamicamente.
evento = function (evt) { //esta funcion nos devuelve el tipo de evento disparado
   return (!evt) ? event : evt;
}

//Aqui se hace lamagia... jejeje, esta funcion crea dinamicamente los nuevos campos file
addCampo = function () { 
//Creamos un nuevo div para que contenga el nuevo campo
   nDiv = document.createElement('div');
//con esto se establece la clase de la div
   nDiv.className = 'archivo';
//este es el id de la div, aqui la utilidad de la variable numero
//nos permite darle un id unico
   nDiv.id = 'file' + (++numero);
//creamos el input para el formulario:
   nCampo = document.createElement('input');
//le damos un nombre, es importante que lo nombren como vector, pues todos los campos
//compartiran el nombre en un arreglo, asi es mas facil procesar posteriormente con php
   nCampo.name = 'archivos[]';
//Establecemos el tipo de campo
   nCampo.type = 'file';
//Ahora creamos un link para poder eliminar un campo que ya no deseemos
   a = document.createElement('a');
//El link debe tener el mismo nombre de la div padre, para efectos de localizarla y eliminarla
   a.name = nDiv.id;
//Este link no debe ir a ningun lado
   a.href = '#';
//Establecemos que dispare esta funcion en click
   a.onclick = elimCamp;
//Con esto ponemos el texto del link
   a.innerHTML = 'Eliminar';
//Bien es el momento de integrar lo que hemos creado al documento,
//primero usamos la función appendChild para adicionar el campo file nuevo
   nDiv.appendChild(nCampo);
//Adicionamos el Link
   nDiv.appendChild(a);
//Ahora si recuerdan, en el html hay una div cuyo id es 'adjuntos', bien
//con esta función obtenemos una referencia a ella para usar de nuevo appendChild
//y adicionar la div que hemos creado, la cual contiene el campo file con su link de eliminación:
   container = document.getElementById('adjuntos');
   container.appendChild(nDiv);
}
//con esta función eliminamos el campo cuyo link de eliminación sea presionado
elimCamp = function (evt){
   evt = evento(evt);
   nCampo = rObj(evt);
   div = document.getElementById(nCampo.name);
   div.parentNode.removeChild(div);
}
//con esta función recuperamos una instancia del objeto que disparo el evento
rObj = function (evt) { 
   return evt.srcElement ?  evt.srcElement : evt.target;
}

</script>


</head>

<body>

 <form name="formu" id="formu" action="uploader.php" method="post" enctype="multipart/form-data">
     <dl>            
   <dt><label>Archivos a Subir:</label></dt>
        <!-- Esta div contendrá todos los campos file que creemos -->
   <dd><div id="adjuntos">
        <!-- Hay que prestar atención a esto, el nombre de este campo debe siempre terminar en []
        como un vector, y ademas debe coincidir con el nombre que se da a los campos nuevos 
        en el script -->
   <input type="file" name="archivos[]" /><br />
   </div></dd>
   <dt><a href="#" onClick="addCampo()">Subir otro archivo</a></dt>      
   <dd><input type="submit" value="Enviar" id="envia" name="envia" /></dd>
     </dl>
</form>

</body>
</html>

loncho_rojas · #3 (**permalink**) 27/09/2010, 15:40

uploader.php

Código PHP:

  <?php


include('conexion.php');

function redimensionar_jpeg($img_original, $img_nueva, $img_nueva_anchura, $img_nueva_altura, $img_nueva_calidad)
{ 
    $img = imagecreatefromJPEG($img_original); 
    $thumb = imagecreatetruecolor($img_nueva_anchura,$img_nueva_altura);  
    imagecopyresampled($thumb,$img,0,0,0,0,$img_nueva_anchura,$img_nueva_altura,ImageSX($img),ImageSY($img)); 
    ImageJPEG($thumb,$img_nueva,$img_nueva_calidad);
    ImageDestroy($img);
} 

    

                
                 
   //Preguntamos si nuetro arreglo 'archivos' fue definido
         if (isset($_FILES["archivos"])) {
             
        
         //de se asi, para procesar los archivos subidos al servidor solo debemos recorrerlo
         //obtenemos la cantidad de elementos que tiene el arreglo archivos
         $tot = count($_FILES["archivos"]["name"]);

         //este for recorre el arreglo
         for ($i = 0; $i < $tot; $i++){
             
                
                                                    
            if(is_uploaded_file($_FILES["archivos"]["tmp_name"][$i])){
         //con el indice $i, podremos obtener la propiedad que desemos de cada archivo
         //para trabajar con este como si fuera un array continuo
            $tmp_name = $_FILES["archivos"]["tmp_name"][$i];
            $name = $_FILES["archivos"]["name"][$i];
            $tamano = $_FILES["archivos"]["size"][$i];
            $tipo = $_FILES["archivos"]["type"][$i]; 
            
            
            
                    if (!((strpos($tipo, "gif") || strpos($tipo, "png")|| strpos($tipo, "jpeg")) && ($tamano < 500000))) {
                    echo '<div style="width:500px; height:80px; padding:10px; background-color:#FF0000;">';
                    echo '<p style="font-size:15px; color:#FFF;"><strong>ERROR DE FORMATO O TAMANHO</strong></p></div>';
                    
                    }else{

                            /* Guardar el archivo */
                            $destino="../galerias/fotos/";
                            $dir_thumb = "thumbs/";
                                if (!file_exists($destino.$dir_thumb)){
                                    @mkdir ($destino.$dir_thumb, 0777) 
                                    or die("No se ha podido crear el directorio ".$destino.$dir_thumb);
                                }
                            
                            $destTHU= $destino.$dir_thumb;
                            
                            
                            if(move_uploaded_file($_FILES["archivos"]["tmp_name"][$i],$destino.$name)){
                            redimensionar_jpeg($destino.$name, $destTHU.$name, 70, 47, 80);
                                //inserto los textos en la base de datos
                             $sql = "INSERT INTO galeria_arte (big, small) 
                             VALUES ('".$name."', '".$name."')";
                                
                                
                                
                                
                        }//if move_uploaded_file
                        
                    }//else
                    
                }//if is_uploaded_file
                
                //cierro mi consulta $sql
                 mysql_query($sql,$fausto_conn) or die(mysql_error($fausto_conn)); 
            }//for
            
        
      } //if

          
     
?>

loncho_rojas · #4 (**permalink**) 27/09/2010, 15:41

conexion.php

Código PHP:

  <?php

# FileName="Connection_php_mysql.htm"

# Type="MYSQL"

# HTTP="true"

$hostname = "localhost";

$database = "nombre_base_datost";

$username = "root";

$password = "";

$fausto_conn = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR);

mysql_select_db($database, $fausto_conn); 

?>

loncho_rojas · #5 (**permalink**) 27/09/2010, 15:43

estructura de tabla base de datos donde será insertado:

Código MySQL:

Ver originalCREATE TABLE IF NOT EXISTS `galeria_arte` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `big` varchar(50) COLLATE latin1_spanish_ci NOT NULL,
  `small` varchar(50) COLLATE latin1_spanish_ci NOT NULL,
  PRIMARY KEY (`idImg`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_spanish_ci AUTO_INCREMENT=1 ;

loncho_rojas · #6 (**permalink**) 27/09/2010, 15:47

OJO, es solo un ejemplo... ustedes pueden modificar todo lo que quieran y agregarle mas o menos seguridad o redirecciones o lo que quieran.. mi intencion es solo generar una alternativa como por ejemplo, que el usuario pueda cargar fotos varias en una GALERIA DE IMAGENES y a la vez crear una miniatura de la imagen para mostrarse en vez de la imagen original...

un ejemplo de aplicacion de galeria sería GALLERIFFIC, entonces podemos crear las imagenes y que ya aparezcan en la galeria..

Como se crea la galeria? pues, ese es otro tema

Saludos y espero que sirva

loncho_rojas · #7 (**permalink**) 27/09/2010, 15:48

aca es identico al uploader.php.. solo comento algunos puntos como donde se crea la carpeta thumb

Cita:

Iniciado por loncho_rojas

uploader.php

Código PHP:

  <?php


include('conexion.php');

function redimensionar_jpeg($img_original, $img_nueva, $img_nueva_anchura, $img_nueva_altura, $img_nueva_calidad)
{ 
    $img = imagecreatefromJPEG($img_original); 
    $thumb = imagecreatetruecolor($img_nueva_anchura,$img_nueva_altura);  
    imagecopyresampled($thumb,$img,0,0,0,0,$img_nueva_anchura,$img_nueva_altura,ImageSX($img),ImageSY($img)); 
    ImageJPEG($thumb,$img_nueva,$img_nueva_calidad);
    ImageDestroy($img);
} 

    

                
                 
   //Preguntamos si nuetro arreglo 'archivos' fue definido
         if (isset($_FILES["archivos"])) {
             
        
         //de se asi, para procesar los archivos subidos al servidor solo debemos recorrerlo
         //obtenemos la cantidad de elementos que tiene el arreglo archivos
         $tot = count($_FILES["archivos"]["name"]);

         //este for recorre el arreglo
         for ($i = 0; $i < $tot; $i++){
             
                
                                                    
            if(is_uploaded_file($_FILES["archivos"]["tmp_name"][$i])){
         //con el indice $i, podremos obtener la propiedad que desemos de cada archivo
         //para trabajar con este como si fuera un array continuo
            $tmp_name = $_FILES["archivos"]["tmp_name"][$i];
            $name = $_FILES["archivos"]["name"][$i];
            $tamano = $_FILES["archivos"]["size"][$i];
            $tipo = $_FILES["archivos"]["type"][$i]; 
            
            
            
                    if (!((strpos($tipo, "gif") || strpos($tipo, "png")|| strpos($tipo, "jpeg")) && ($tamano < 500000))) {
                    echo '<div style="width:500px; height:80px; padding:10px; background-color:#FF0000;">';
                    echo '<p style="font-size:15px; color:#FFF;"><strong>ERROR DE FORMATO O TAMANHO</strong></p></div>';
                    
                    }else{

                            /* Guardar el archivo */
                            $destino="../galerias/fotos/";// carpeta del server donde se guardara

                               //creamos una carpeta llamada thumb dentro de $destino si es que no existiera
                            $dir_thumb = "thumbs/";
                                if (!file_exists($destino.$dir_thumb)){
                                    @mkdir ($destino.$dir_thumb, 0777) 
                                    or die("No se ha podido crear el directorio ".$destino.$dir_thumb);
                                }
                            
                            $destTHU= $destino.$dir_thumb;
                            
                            
                            if(move_uploaded_file($_FILES["archivos"]["tmp_name"][$i],$destino.$name)){
                            redimensionar_jpeg($destino.$name, $destTHU.$name, 70, 47, 80);
                                //inserto los textos en la base de datos
                             $sql = "INSERT INTO galeria_arte (big, small) 
                             VALUES ('".$name."', '".$name."')";
                                
                                
                                
                                
                        }//if move_uploaded_file
                        
                    }//else
                    
                }//if is_uploaded_file
                
                //cierro mi consulta $sql
                 mysql_query($sql,$fausto_conn) or die(mysql_error($fausto_conn)); 
            }//for
            
        
      } //if

          
     
?>

loncho_rojas · #8 (**permalink**) 28/09/2010, 08:11

Cita:

Iniciado por loncho_rojas

cargar.html

Código HTML:

<!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>Cargar Archivos</title>

<script type="text/javascript">
var numero = 0; //Esta es una variable de control para mantener nombres
            //diferentes de cada campo creado dinamicamente.
evento = function (evt) { //esta funcion nos devuelve el tipo de evento disparado
   return (!evt) ? event : evt;
}

//Aqui se hace lamagia... jejeje, esta funcion crea dinamicamente los nuevos campos file
addCampo = function () { 
//Creamos un nuevo div para que contenga el nuevo campo
   nDiv = document.createElement('div');
//con esto se establece la clase de la div
   nDiv.className = 'archivo';
//este es el id de la div, aqui la utilidad de la variable numero
//nos permite darle un id unico
   nDiv.id = 'file' + (++numero);
//creamos el input para el formulario:
   nCampo = document.createElement('input');
//le damos un nombre, es importante que lo nombren como vector, pues todos los campos
//compartiran el nombre en un arreglo, asi es mas facil procesar posteriormente con php
   nCampo.name = 'archivos[]';
//Establecemos el tipo de campo
   nCampo.type = 'file';
//Ahora creamos un link para poder eliminar un campo que ya no deseemos
   a = document.createElement('a');
//El link debe tener el mismo nombre de la div padre, para efectos de localizarla y eliminarla
   a.name = nDiv.id;
//Este link no debe ir a ningun lado
   a.href = '#';
//Establecemos que dispare esta funcion en click
   a.onclick = elimCamp;
//Con esto ponemos el texto del link
   a.innerHTML = 'Eliminar';
//Bien es el momento de integrar lo que hemos creado al documento,
//primero usamos la función appendChild para adicionar el campo file nuevo
   nDiv.appendChild(nCampo);
//Adicionamos el Link
   nDiv.appendChild(a);
//Ahora si recuerdan, en el html hay una div cuyo id es 'adjuntos', bien
//con esta función obtenemos una referencia a ella para usar de nuevo appendChild
//y adicionar la div que hemos creado, la cual contiene el campo file con su link de eliminación:
   container = document.getElementById('adjuntos');
   container.appendChild(nDiv);
}
//con esta función eliminamos el campo cuyo link de eliminación sea presionado
elimCamp = function (evt){
   evt = evento(evt);
   nCampo = rObj(evt);
   div = document.getElementById(nCampo.name);
   div.parentNode.removeChild(div);
}
//con esta función recuperamos una instancia del objeto que disparo el evento
rObj = function (evt) { 
   return evt.srcElement ?  evt.srcElement : evt.target;
}

</script>


</head>

<body>

 <form name="formu" id="formu" action="uploader.php" method="post" enctype="multipart/form-data">
     <dl>            
   <dt><label>Archivos a Subir:</label></dt>
        <!-- Esta div contendrá todos los campos file que creemos -->
   <dd><div id="adjuntos">
        <!-- Hay que prestar atención a esto, el nombre de este campo debe siempre terminar en []
        como un vector, y ademas debe coincidir con el nombre que se da a los campos nuevos 
        en el script -->
   <input type="file" name="archivos[]" /><br />
   </div></dd>
   <dt><a href="#" onClick="addCampo()">Subir otro archivo</a></dt>      
   <dd><input type="submit" value="Enviar" id="envia" name="envia" /></dd>
     </dl>
</form>

</body>
</html>

Este Script Javascript es un aporte que tomé desde CRISTALAB... pero sirve a la causa WEBERA.. solo lo aclaro de nuevo para que no se ofenda de quien lo descolgue y por ser etico