You are on page 1of 15

Como crear un sistema para subir imágenes usando Dreamweaver, PHP y MySQL

Puedes ver la segunda parte de este artículo aquí En el tiempo que llevo participando en la sección de Editores Web de Foros del Web la duda de cómo subir archivos al servidor (imágenes principalmente) vía http usando Dreamweaver ha surgido múltiples veces. Mi respuesta has sido siempre la misma: “No se puede subir archivos usando funciones de Dreamweaver solamente“. Esta todavía es la realidad, por lo menos hasta el día de hoy que redacto este artículo, 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 código lo mas claramente posible. En este caso decidí expandir un poco mi respuesta con un ejemplo más conciso aquí en mi blog. En este tutorial estaré discutiendo como acoplar el código PHP necesario al código ya creado por Dreamweaver, osea, no entraré en detalles acerca del HTML/CSS. Tengo pensado hacer una serie de tutoriales de “buenas prácticas” al momento de usar HTML y CSS pronto y ahí pienso abundar más 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 opción en el menú de Enctype:

También 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 imágenes y clasificar las mismas según el tipo o la categoría a la que pertenezcan. El archivo SQL lo he incluido en el archivo para descargar.

El nombre de tu recordset . imágenes. pero espero que sea evidente en la imagen lo que estoy haciendo). ya sea HTML. 5 border: 1px solid #CCCCCC. hacemos click en el signo de más (+) y escogemos “Recordset (Query)”: Una vez en la ventana de Recordset se especifica la siguiente información: 1. 6 } 7#form1 label{display:block.} 9 Hacemos una carpeta para las imágenes y la ponemos en la raíz (root) de nuestro sitio (site) y le damos permisos para leer y escribir (777).font-weight:bold.text-align:center. 4 margin:0 auto. En el panel de “applications” vamos a la pestaña de Bindings. (Yo tengo DW en inglés. etc. background: #F5F5F5.El CSS es también bastante sencillo ya que no es el foco de este tutorial: ? 1 2#form1{ padding: 10px. 3 width:250px.} 8. Yo la he llamado “imagenes” (Acuérdense que no pueden usar acentos ni eñes (ñ) en los nombres de los archivos.enviar{display:block. padding:10px 0 5px.): Empezamos creando un “Recordset” escogiendo la tabla de las imágenes.padding:5px 0.

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 página. Esta la igualaremos al valor “general”. Escoges todas las columnas 5. el cual es el que enviamos en el input “tipo” 6. Vamos a hacer un listado de las imágenes que hemos subido al servidor: . El filtro que escogeremos es el tipo_archivo. La tabla archivos (si usas la tabla creada por el archivo sql que provisto en este tutorial) 4.2. Tu conexión 3.

no importa el tamaño por ahora. En este caso sólo necesitamos cambiar la ruta en el script. . tendríamos que cambiar todos los records de la base de datos. También necesitas añadir “imagenes/” al principio del campo URL. No se recomienda almacenar la ruta de las imágenes en la base de datos ya que. En ese campo se almacenará en nuevo nombre que le daremos a la imagen. 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. Insertamos un “image placeholder”. si se necesita cambiar la ruta después.Luego creamos la imagen dinámica. Esa es la ruta de la carpeta donde almacenaremos las imágenes.

Metemos tanto el nombre como la imagen en una lista (<ul>) escogiendo ambos y dándole al botón de “unordered list”: El HTML debe ser el siguiente: ? <ul> 1 <li><img src="imagenes/<?php echo 2$row_Recordset1['archivo_archivos']. ?></li> </ul> . ?>" alt="" /> <?php echo 3$row_Recordset1['nombre_archivos'].

?>" /> <?php echo 3$row_Recordset1['nombre_archivos'].hacer que se repitan los elementos conforme con el número de imágenes que se han subido y 2.hacer que la lista solo se muestre si existen imágenes que se han subido.Escogemos el <li> (podemos usar el “code inspector”: y en panel de Data le damos un comportamiento de repetir. ?></li> </ul> Necesitamos hacer dos cosas mas con la lista: 1. Para proveer una información alternativa de la imagen podemos usar el mismo nombre: ? <ul> <li><img src="imagenes/<?php echo 1 $row_Recordset1['archivo_archivos'].Con ven el “alt” de la imagen está vacío. ?>" alt="<?php echo 2$row_Recordset1['nombre_archivos']. Una vez salga la ventana de repetir escoges el único recordset que existe en la página y escoges enseñar todos los records (no haremos paginación para este ejemplo) . 1.

?>" alt="<?php echo 4$row_Recordset1['nombre_archivos']. ?></ul> <?php } // Show if recordset not empty ?> En este caso le damos un alto a la imagen de 100 pixels para que aparezca pequeña. pero eso es algo no explicaré como hacerlo en este tutorial. ?></li> <?php } while ($row_Recordset1 = 6 mysql_fetch_assoc($Recordset1)). .2. ?>" height="100" /> <?php echo 5$row_Recordset1['nombre_archivos'].Escogemos la lista (el ul . Escoges el único recordset y le das al botón 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']. y en la panel de Data le damos un comportamiento de mostrar si el recordset no está vacío. Usualmente uso la clase PHPImagen de okram para crear los thumbnails. usamos el “code inspector”).

Ya que tenemos el listado preparado podemos agregar el comportamiento del “insert”. Los otros campos los agregaremos después de procesar la imagen . usando el panel de “Application” como también con en las herramientas de “Data” en el panel de “insert”: 1 – Aplicación: Sever Behaviors -> Signo de mós (+) Insert Record 2 – Data: Botón de Insert -> Insert Record: Una vez en la ventana de “insert record” seleccionas lo siguiente: 1. Las columnas de la base de datos (Columns) tienes que hacerlas coincidir con el valor del formulario (Value). La tabla de archivos o la que estés usando para almacenar la información de las imágenes. 3. En este caso sólo hacemos coincidir dos de ellos: di_tipo = tipo y nombre_archivo = nombre. Tu conexión. 4. Vale la pena mencionar que se puede hacer de dos formas. El formulario del insert 2.

Este debe ser el código PHP resultante del insert: ? 1{ 2 3 $insertSQL = sprintf("INSERT INTO archivos (tipo_archivos. } if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) Ahora a esa parte le añadimos la parte PHP que se encarga de procesar las imágenes. "text"). "text")). GetSQLValueString($_POST['tipo']. $Juaniq_codigo_con) or 9die(mysql_error()). 2 //recibimos el campo de imagen 0 $imagen = $_FILES['imagen']['tmp_name']. 6 7 mysql_select_db($database_Juaniq_codigo_con. //guardamos el nombre original de la imagen en una variable 3 $nombrebre_orig = $_FILES['imagen']['name']. 5 GetSQLValueString($_POST['nombre']. 0 //el proximo codigo es para ver que extension es la imagen . 8 $Result1 = mysql_query($insertSQL. $Juaniq_codigo_con). %s)". Después de: ? 1{ if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) Se agrega el siguiente código: ? 0 ////////////// Parte añadida 1 ////////////// 1 //carpteta donde vamos a guardar la imagen 0 $carpeta = 'imagenes/'. 4nombre_archivos) VALUES (%s.

//de damos permisos 777 1 chmod($nombre_nuevo_con_carpeta. osea. 2 //nombre nuevo con la carpeta 1 $nombre_nuevo_con_carpeta = $carpeta.'. 5 1 /////////////////////////////////////////// 6 1 7 1 8 1 9 2 0 2 1 2 2 El código lo he comentado lo mejor posible para que se pueda entender que hace cada línea. //creamos nuevo nombre para que tenga nombre unico 1 $nombre_nuevo = time(). 4 $nombre_nuevo_con_carpeta). 1nombre_archivos) VALUES (%s. 3 //por fin movemos el archivo a la carpeta de imagenes 1 $mover_archivos = move_uploaded_file($imagen . la consulta MySQL.rand(0. %s)". 1 $cuenta_arr_nombre = count($array_nombre).0777). 1 $extension = strtolower($array_nombre[--$cuenta_arr_nombre]).'_'. Se cambia por los siguiente: ? 1// se agrega "archivo_archivos.$extension. $insertSQL = .'. donde dice: ? $insertSQL = sprintf("INSERT INTO archivos (tipo_archivos.4 0 5 0 6 0 7 0 8 0 9 1 0 $array_nombre = explode('.100). También.$nombre_nuevo.$nombrebre_orig).'. extension_archivos y la fecha" a la extra %s separados por comas 2consulta y dos sprintf("INSERT INTO archivos (tipo_archivos.

//nombre nuevo con la carpeta $nombre_nuevo_con_carpeta = $carpeta. $extension = strtolower($array_nombre[--$cuenta_arr_nombre]).nombre_archivos. %s. fecha_archivos) VALUES (%s. "text"). //recibimos el campo de imagen $imagen = $_FILES['imagen']['tmp_name']. 2GetSQLValueString($extension. agregamos los dos valores al que correspondan con los campos en el sprintf.'_'.rand(0. //por fin movemos el archivo a la carpeta de imagenes $mover_archivos = move_uploaded_file($imagen . NOW())". "text"). $nombre_nuevo_con_carpeta). extension_archivos y fecha_archivos a la consulta. %s. $cuenta_arr_nombre = count($array_nombre). dos extra %s para que los valores del sprintf creado por DW correspondan con los campos agregados y también la función “NOW()” de MySQL para que se inserte la fecha que cuando se subió el archivo. fecha_archivos) VALUES (%s.'. archivo_archivos. extension_archivos y la fecha" a la consulta y dos extra %s separados por comas $insertSQL = sprintf("INSERT INTO archivos (tipo_archivos. GetSQLValueString($_POST['tipo']. NOW())". //de damos permisos 777 chmod($nombre_nuevo_con_carpeta. %s. extension_archivos.$nombre_nuevo. "text") El código 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 añadida 1 ////////////// //carpteta donde vamos a guardar la imagen $carpeta = 'imagenes/'. /////////////////////////////////////////// // se agrega "archivo_archivos. "text") Y antes del paréntesis y el punto y coma agregamos: ? 1GetSQLValueString($nombre_nuevo.'. Aquí hemos añadido los campos archivo_archivos. "text"). extension_archivos. %s. ////////////// Parte añadida ////////////// .$extension. Después de: ? 1GetSQLValueString($_POST['nombre']. %s. nombre_archivos. //guardamos el nombre original de la imagen en una variable $nombrebre_orig = $_FILES['imagen']['name'].$nombrebre_orig).'.100). %s. Por último. //creamos nuevo nombre para que tenga nombre unico $nombre_nuevo = time(). GetSQLValueString($_POST['nombre'].0777). //el proximo codigo es para ver que extension es la imagen $array_nombre = explode('. archivo_archivos.

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

//de damos permisos 777 chmod($nombre_nuevo_con_carpeta. 'jpeg'. //por fin movemos el archivo a la carpeta de imagenes $mover_archivos = move_uploaded_file($imagen .$nombre_nuevo.Y listo. jpeg.'. Esto lo podemos hacer creando un Array con los valores de las extensiones que son permitidas. Al final el código 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 añadida 1 ////////////// //array de archivos disponibles $archivos_disp_ar = array('jpg'. Una vez finalizado el sistema se le puede aplicar el HTML/CSS que sea necesario. //recibimos el campo de imagen $imagen = $_FILES['imagen']['tmp_name']. $archivos_disp_ar)) $error = "Este tipo de 2archivo no es permitido". $cuenta_arr_nombre = count($array_nombre).rand(0.'_'.$extension. 'png'). 'png'). En este caso permitimos los siguientes archivos :jpg. //guardamos el nombre original de la imagen en una variable $nombrebre_orig = $_FILES['imagen']['name'].$nombrebre_orig).100). gif y png.0777). De esa forma podremos comparar los valores del array con el archivo subido por el usuario. Validamos el tipo de archivo de esta forma: ? //validamos la extension 1if(!in_array($extension. //el proximo codigo es para ver que extension es la imagen $array_nombre = explode('. Este es el array: ? 1$archivos_disp_ar = array('jpg'. $extension = strtolower($array_nombre[--$cuenta_arr_nombre]). //carpteta donde vamos a guardar la imagen $carpeta = 'imagenes/'. /////////////////////////////////////////// . 'gif'. //validamos la extension if(!in_array($extension.'. 'gif'. $archivos_disp_ar)) $error = "Este tipo de archivo no es permitido".'. 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 imágenes. Después usamos una condicional para ver si la variable $error está vacía o no. //nombre nuevo con la carpeta $nombre_nuevo_con_carpeta = $carpeta. $nombre_nuevo_con_carpeta). 'jpeg'. if(empty($error)){ //creamos nuevo nombre para que tenga nombre unico $nombre_nuevo = time().

%s. NOW())". GetSQLValueString($extension. "text"). mysql_select_db('NOMBRE DE TU DATABASE'. nombre_archivos. "text"). GetSQLValueString($_POST['tipo']. ////////////// Parte añadida ////////////// GetSQLValueString($nombre_nuevo. } } .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. "text")) ///////////////////////////////////////// // . extension_archivos. 'NOMBRE DE TU CONNECCION AQUI'). 'INCLUIR TU CONNECCION AQUI') or die(mysql_error()). "text"). %s. extension_archivos y la fecha" a la consulta y dos extra %s separados por comas $insertSQL = sprintf("INSERT INTO archivos (tipo_archivos. %s. GetSQLValueString($_POST['nombre']. fecha_archivos) VALUES (%s. archivo_archivos. $Result1 = mysql_query($insertSQL.

?> El próximo tutorial relacionado a este será como borrar los records de la base de datos y las imágenes físicas. .0 4 1 4 2 4 3 4 4 4 5 4 6 Para mostrar el error cuando la condición se cumpla ponemos esto encima de la forma: ? 1<?php if(!empty($error)) echo $error.