Foros del Web » Programando para Internet » PHP »

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

Estas en el tema de [APORTE] Cargar una o varias imagenes a la BD y generar un thumbnail o miniatura en el foro de PHP en Foros del Web. aqui un aporte que hace lo sigueinte: - Crea varios campos INPUT FILE dinamicamente con Javascript (aporte de Cristalab) - Envia las URL de las ...
  #1 (permalink)  
Antiguo 27/09/2010, 15:35
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 15 años, 6 meses
Puntos: 175
[APORTE] Cargar una o varias imagenes a la BD y generar un thumbnail o miniatura

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
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...
  #2 (permalink)  
Antiguo 27/09/2010, 15:39
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 15 años, 6 meses
Puntos: 175
Respuesta: [APORTE] Cargar una o varias imagenes a la BD y generar un thumbnail o min

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> 
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...
  #3 (permalink)  
Antiguo 27/09/2010, 15:40
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 15 años, 6 meses
Puntos: 175
Respuesta: [APORTE] Cargar una o varias imagenes a la BD y generar un thumbnail o min

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_thumb0777
                                    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.$name704780);
                                
//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

          
     
?>
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...
  #4 (permalink)  
Antiguo 27/09/2010, 15:41
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 15 años, 6 meses
Puntos: 175
Respuesta: [APORTE] Cargar una o varias imagenes a la BD y generar un thumbnail o min

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); 
?>
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...
  #5 (permalink)  
Antiguo 27/09/2010, 15:43
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 15 años, 6 meses
Puntos: 175
Respuesta: [APORTE] Cargar una o varias imagenes a la BD y generar un thumbnail o min

estructura de tabla base de datos donde será insertado:

Código MySQL:
Ver original
  1. CREATE TABLE IF NOT EXISTS `galeria_arte` (
  2.   `big` varchar(50) COLLATE latin1_spanish_ci NOT NULL,
  3.   `small` varchar(50) COLLATE latin1_spanish_ci NOT NULL,
  4.   PRIMARY KEY (`idImg`)
  5. ) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_spanish_ci AUTO_INCREMENT=1 ;
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...
  #6 (permalink)  
Antiguo 27/09/2010, 15:47
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 15 años, 6 meses
Puntos: 175
Respuesta: [APORTE] Cargar una o varias imagenes a la BD y generar un thumbnail o min

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

__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...
  #7 (permalink)  
Antiguo 27/09/2010, 15:48
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 15 años, 6 meses
Puntos: 175
Respuesta: [APORTE] Cargar una o varias imagenes a la BD y generar un thumbnail o min

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


Cita:
Iniciado por loncho_rojas Ver Mensaje
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_thumb0777
                                    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.$name704780);
                                
//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

          
     
?>
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...
  #8 (permalink)  
Antiguo 28/09/2010, 08:11
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 15 años, 6 meses
Puntos: 175
Respuesta: [APORTE] Cargar una o varias imagenes a la BD y generar un thumbnail o min

Cita:
Iniciado por loncho_rojas Ver Mensaje
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
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...

Etiquetas: bd, imagenes, miniatura, aportes, thumbnails
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado

SíEste tema le ha gustado a 4 personas




La zona horaria es GMT -6. Ahora son las 18:48.