Como crear un sistema para subir imgenes usando Dreamweaver, PHP y MySQL

Puedes ver la segunda parte de este artculo aqu En el tiempo que llevo participando en la seccin de Editores Web de Foros del Web la duda de cmo subir archivos al servidor (imgenes principalmente) va http usando Dreamweaver ha surgido mltiples veces. Mi respuesta has sido siempre la misma: No se puede subir archivos usando funciones de Dreamweaver solamente. Esta todava es la realidad, por lo menos hasta el da de hoy que redacto este artculo, aunque reciente alguien volvi a preguntar lo mismo y decid responder como siempre respondo ese tipo de preguntas: haciendo todo lo que se pueda hacer usando funciones de DW y, el resto, trabajando el cdigo lo mas claramente posible. En este caso decid expandir un poco mi respuesta con un ejemplo ms conciso aqu en mi blog. En este tutorial estar discutiendo como acoplar el cdigo PHP necesario al cdigo ya creado por Dreamweaver, osea, no entrar en detalles acerca del HTML/CSS. Tengo pensado hacer una serie de tutoriales de buenas prcticas al momento de usar HTML y CSS pronto y ah pienso abundar ms ese tema. Dicho esto, este es el HTML: ? 1<form id="form1" enctype="multipart/form-data" method="post"> 2 <label for="imagen">nombre</label> 3 <input id="nombre" name="nombre" type="text" /> <label for="imagen">imagen</label> 4 <input id="imagen" name="imagen" type="file" /> 5 <span class="enviar"><input id="enviar" name="enviar" type="submit" 6value="Enviar" /></span> 7 <input id="tipo" name="tipo" type="hidden" value="general" /> 8</form> Lo importante aqu es el hecho que he escogido multipart/form-data como valor del atributo enctype del formulario. Esto permitir al formulario enviar el archivo en la cabecera HTML. Puedes escoger este tipo de enctype seleccionando el formulario y escogiendo esa opcin en el men de Enctype:

Tambin he incluido un input oculto llamado tipo. No es algo que normalmente haga, pero esta vez he utilizado las mismas tablas MySQL que de otro post. De esa forma pudo usar una sola tabla de imgenes y clasificar las mismas segn el tipo o la categora a la que pertenezcan. El archivo SQL lo he incluido en el archivo para descargar.

El CSS es tambin bastante sencillo ya que no es el foco de este tutorial: ? 1 2#form1{ padding: 10px; 3 width:250px; 4 margin:0 auto; background: #F5F5F5; 5 border: 1px solid #CCCCCC; 6 } 7#form1 label{display:block;font-weight:bold;padding:5px 0;} 8.enviar{display:block; padding:10px 0 5px;text-align:center;} 9 Hacemos una carpeta para las imgenes y la ponemos en la raz (root) de nuestro sitio (site) y le damos permisos para leer y escribir (777). Yo la he llamado imagenes (Acurdense que no pueden usar acentos ni ees () en los nombres de los archivos, ya sea HTML, imgenes, etc.):

Empezamos creando un Recordset escogiendo la tabla de las imgenes. (Yo tengo DW en ingls, pero espero que sea evidente en la imagen lo que estoy haciendo). En el panel de applications vamos a la pestaa de Bindings, hacemos click en el signo de ms (+) y escogemos Recordset (Query):

Una vez en la ventana de Recordset se especifica la siguiente informacin: 1. El nombre de tu recordset

2. Tu conexin 3. La tabla archivos (si usas la tabla creada por el archivo sql que provisto en este tutorial) 4. Escoges todas las columnas 5. El filtro que escogeremos es el tipo_archivo. Esta la igualaremos al valor general, el cual es el que enviamos en el input tipo 6. En el Sort escogemos organizar los records de acuerdo a la fecha de manera descendiente para que se muestre primero la ltima imagen que se subi.

Una vez creado el recordset arrastramos el campo del nombre del archivo al cuerpo de la pgina. Vamos a hacer un listado de las imgenes que hemos subido al servidor:

Luego creamos la imagen dinmica. Insertamos un image placeholder, no importa el tamao por ahora. Para escoger el source (src) le escogemos el placeholder y le damos click al icono de la carpeta en el panel de propiedades:

Cuando salga la ventana de Select Image Source escoges Data Source y seleccionas el campo archivo_archivo de la base de datos. En ese campo se almacenar en nuevo nombre que le daremos a la imagen. Tambin necesitas aadir imagenes/ al principio del campo URL. Esa es la ruta de la carpeta donde almacenaremos las imgenes. No se recomienda almacenar la ruta de las imgenes en la base de datos ya que, si se necesita cambiar la ruta despus, tendramos que cambiar todos los records de la base de datos. En este caso slo necesitamos cambiar la ruta en el script.

Metemos tanto el nombre como la imagen en una lista (<ul>) escogiendo ambos y dndole al botn de unordered list:

El HTML debe ser el siguiente: ?

<ul>

1 <li><img src="imagenes/<?php echo 2$row_Recordset1['archivo_archivos']; ?>" alt="" /> <?php echo 3$row_Recordset1['nombre_archivos']; ?></li>
</ul>

Con ven el alt de la imagen est vaco. Para proveer una informacin alternativa de la imagen podemos usar el mismo nombre: ?
<ul>

<li><img src="imagenes/<?php echo 1 $row_Recordset1['archivo_archivos']; ?>" alt="<?php echo 2$row_Recordset1['nombre_archivos']; ?>" /> <?php echo 3$row_Recordset1['nombre_archivos']; ?></li> </ul>

Necesitamos hacer dos cosas mas con la lista: 1- hacer que se repitan los elementos conforme con el nmero de imgenes que se han subido y 2- hacer que la lista solo se muestre si existen imgenes que se han subido. 1- Escogemos el <li> (podemos usar el code inspector:

y en panel de Data le damos un comportamiento de repetir. Una vez salga la ventana de repetir escoges el nico recordset que existe en la pgina y escoges ensear todos los records (no haremos paginacin para este ejemplo)

2- Escogemos la lista (el ul , usamos el code inspector), y en la panel de Data le damos un comportamiento de mostrar si el recordset no est vaco. Escoges el nico recordset y le das al botn de OK:

El HTML se debe ver como sigue: ?

<?php if ($totalRows_Recordset1 > 0) { // Show if recordset not empty ?> 1<ul> <?php do { ?> 2 <li><img src="imagenes/<?php echo 3$row_Recordset1['archivo_archivos']; ?>" alt="<?php echo 4$row_Recordset1['nombre_archivos']; ?>" height="100" /> <?php echo 5$row_Recordset1['nombre_archivos']; ?></li> <?php } while ($row_Recordset1 = 6 mysql_fetch_assoc($Recordset1)); ?></ul> <?php } // Show if recordset not empty ?>

En este caso le damos un alto a la imagen de 100 pixels para que aparezca pequea. Usualmente uso la clase PHPImagen de okram para crear los thumbnails, pero eso es algo no explicar como hacerlo en este tutorial.

Ya que tenemos el listado preparado podemos agregar el comportamiento del insert. Vale la pena mencionar que se puede hacer de dos formas, usando el panel de Application como tambin con en las herramientas de Data en el panel de insert: 1 Aplicacin: Sever Behaviors -> Signo de ms (+) Insert Record

2 Data: Botn de Insert -> Insert Record:

Una vez en la ventana de insert record seleccionas lo siguiente: 1. El formulario del insert 2. Tu conexin. 3. La tabla de archivos o la que ests usando para almacenar la informacin de las imgenes. 4. Las columnas de la base de datos (Columns) tienes que hacerlas coincidir con el valor del formulario (Value). En este caso slo hacemos coincidir dos de ellos: di_tipo = tipo y nombre_archivo = nombre. Los otros campos los agregaremos despus de procesar la imagen

Este debe ser el cdigo PHP resultante del insert: ? 1{ 2 3 $insertSQL = sprintf("INSERT INTO archivos (tipo_archivos, 4nombre_archivos) VALUES (%s, %s)", GetSQLValueString($_POST['tipo'], "text"), 5 GetSQLValueString($_POST['nombre'], "text")); 6 7 mysql_select_db($database_Juaniq_codigo_con, $Juaniq_codigo_con); 8 $Result1 = mysql_query($insertSQL, $Juaniq_codigo_con) or 9die(mysql_error());
} if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1"))

Ahora a esa parte le aadimos la parte PHP que se encarga de procesar las imgenes. Despus de: ? 1{
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1"))

Se agrega el siguiente cdigo: ? 0 ////////////// Parte aadida 1 ////////////// 1 //carpteta donde vamos a guardar la imagen 0 $carpeta = 'imagenes/'; 2 //recibimos el campo de imagen 0 $imagen = $_FILES['imagen']['tmp_name']; //guardamos el nombre original de la imagen en una variable 3 $nombrebre_orig = $_FILES['imagen']['name']; 0
//el proximo codigo es para ver que extension es la imagen

4 0 5 0 6 0 7 0 8 0 9 1 0 $array_nombre = explode('.',$nombrebre_orig); 1 $cuenta_arr_nombre = count($array_nombre); 1 $extension = strtolower($array_nombre[--$cuenta_arr_nombre]); //creamos nuevo nombre para que tenga nombre unico 1 $nombre_nuevo = time().'_'.rand(0,100).'.'.$extension; 2 //nombre nuevo con la carpeta 1 $nombre_nuevo_con_carpeta = $carpeta.$nombre_nuevo; 3 //por fin movemos el archivo a la carpeta de imagenes 1 $mover_archivos = move_uploaded_file($imagen , 4 $nombre_nuevo_con_carpeta); //de damos permisos 777 1 chmod($nombre_nuevo_con_carpeta,0777); 5 1 /////////////////////////////////////////// 6 1 7 1 8 1 9 2 0 2 1 2 2 El cdigo lo he comentado lo mejor posible para que se pueda entender que hace cada lnea. Tambin, la consulta MySQL, osea, donde dice: ?
$insertSQL = sprintf("INSERT INTO archivos (tipo_archivos,

1nombre_archivos) VALUES (%s, %s)", Se cambia por los siguiente:

? 1// se agrega "archivo_archivos, extension_archivos y la fecha" a la extra %s separados por comas 2consulta y dos sprintf("INSERT INTO archivos (tipo_archivos, $insertSQL =

nombre_archivos, archivo_archivos, extension_archivos, fecha_archivos) VALUES (%s, %s, %s, %s, NOW())",

Aqu hemos aadido los campos archivo_archivos, extension_archivos y fecha_archivos a la consulta, dos extra %s para que los valores del sprintf creado por DW correspondan con los campos agregados y tambin la funcin NOW() de MySQL para que se inserte la fecha que cuando se subi el archivo. Por ltimo, agregamos los dos valores al que correspondan con los campos en el sprintf. Despus de: ? 1GetSQLValueString($_POST['nombre'], "text") Y antes del parntesis y el punto y coma agregamos: ? 1GetSQLValueString($nombre_nuevo, "text"), 2GetSQLValueString($extension, "text") El cdigo completo del insert queda as: ? 0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 1 1 1 2 1 3 1 4 1 5
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) { ////////////// Parte aadida 1 ////////////// //carpteta donde vamos a guardar la imagen $carpeta = 'imagenes/'; //recibimos el campo de imagen $imagen = $_FILES['imagen']['tmp_name']; //guardamos el nombre original de la imagen en una variable $nombrebre_orig = $_FILES['imagen']['name']; //el proximo codigo es para ver que extension es la imagen $array_nombre = explode('.',$nombrebre_orig); $cuenta_arr_nombre = count($array_nombre); $extension = strtolower($array_nombre[--$cuenta_arr_nombre]); //creamos nuevo nombre para que tenga nombre unico $nombre_nuevo = time().'_'.rand(0,100).'.'.$extension; //nombre nuevo con la carpeta $nombre_nuevo_con_carpeta = $carpeta.$nombre_nuevo; //por fin movemos el archivo a la carpeta de imagenes $mover_archivos = move_uploaded_file($imagen , $nombre_nuevo_con_carpeta); //de damos permisos 777 chmod($nombre_nuevo_con_carpeta,0777); /////////////////////////////////////////// // se agrega "archivo_archivos, extension_archivos y la fecha" a la consulta y dos extra %s separados por comas $insertSQL = sprintf("INSERT INTO archivos (tipo_archivos, nombre_archivos, archivo_archivos, extension_archivos, fecha_archivos) VALUES (%s, %s, %s, %s, NOW())", GetSQLValueString($_POST['tipo'], "text"), GetSQLValueString($_POST['nombre'], "text"), ////////////// Parte aadida //////////////

1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 2 5 GetSQLValueString($nombre_nuevo, "text"), GetSQLValueString($extension, "text")) 2 /////////////////////////////////////////// 6 ; 2 7 mysql_select_db('NOMBRE DE TU DATABASE', 'NOMBRE DE TU CONNECCION 2 AQUI'); 8 $Result1 = mysql_query($insertSQL, 'INCLUIR TU CONNECCION AQUI') or die(mysql_error()); 2 9 3 } 0 3 1 3 2 3 3 3 4 3 5 3 6 3 7 3 8 3 9

Y listo. Una vez finalizado el sistema se le puede aplicar el HTML/CSS que sea necesario. Algo adicional (y muy recomendado) que podemos hacer es limitar los tipos de archivos que los usuarios van a subir para que solamente puedan subir imgenes. Esto lo podemos hacer creando un Array con los valores de las extensiones que son permitidas. De esa forma podremos comparar los valores del array con el archivo subido por el usuario. En este caso permitimos los siguientes archivos :jpg, jpeg, gif y png. Este es el array: ? 1$archivos_disp_ar = array('jpg', 'jpeg', 'gif', 'png'); Validamos el tipo de archivo de esta forma: ? //validamos la extension 1if(!in_array($extension, $archivos_disp_ar)) $error = "Este tipo de 2archivo no es permitido"; Despus usamos una condicional para ver si la variable $error est vaca o no. Al final el cdigo queda as: ? 0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 1 1 1 2 1 3 1 4 1
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) { ////////////// Parte aadida 1 ////////////// //array de archivos disponibles $archivos_disp_ar = array('jpg', 'jpeg', 'gif', 'png'); //carpteta donde vamos a guardar la imagen $carpeta = 'imagenes/'; //recibimos el campo de imagen $imagen = $_FILES['imagen']['tmp_name']; //guardamos el nombre original de la imagen en una variable $nombrebre_orig = $_FILES['imagen']['name']; //el proximo codigo es para ver que extension es la imagen $array_nombre = explode('.',$nombrebre_orig); $cuenta_arr_nombre = count($array_nombre); $extension = strtolower($array_nombre[--$cuenta_arr_nombre]); //validamos la extension if(!in_array($extension, $archivos_disp_ar)) $error = "Este tipo de archivo no es permitido"; if(empty($error)){ //creamos nuevo nombre para que tenga nombre unico $nombre_nuevo = time().'_'.rand(0,100).'.'.$extension; //nombre nuevo con la carpeta $nombre_nuevo_con_carpeta = $carpeta.$nombre_nuevo; //por fin movemos el archivo a la carpeta de imagenes $mover_archivos = move_uploaded_file($imagen , $nombre_nuevo_con_carpeta); //de damos permisos 777 chmod($nombre_nuevo_con_carpeta,0777); ///////////////////////////////////////////

5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1 3 2 3 3 3 4 3 5 3 6 3 7 3 8 3 9 4

// se agrega "archivo_archivos, extension_archivos y la fecha" a la consulta y dos extra %s separados por comas $insertSQL = sprintf("INSERT INTO archivos (tipo_archivos, nombre_archivos, archivo_archivos, extension_archivos, fecha_archivos) VALUES (%s, %s, %s, %s, NOW())", GetSQLValueString($_POST['tipo'], "text"), GetSQLValueString($_POST['nombre'], "text"), ////////////// Parte aadida ////////////// GetSQLValueString($nombre_nuevo, "text"), GetSQLValueString($extension, "text")) ///////////////////////////////////////// // ; mysql_select_db('NOMBRE DE TU DATABASE', 'NOMBRE DE TU CONNECCION AQUI'); $Result1 = mysql_query($insertSQL, 'INCLUIR TU CONNECCION AQUI') or die(mysql_error()); } }

0 4 1 4 2 4 3 4 4 4 5 4 6 Para mostrar el error cuando la condicin se cumpla ponemos esto encima de la forma: ? 1<?php if(!empty($error)) echo $error; ?> El prximo tutorial relacionado a este ser como borrar los records de la base de datos y las imgenes fsicas.