Upload de archivos para php con uploadify v2.1.4 , guardar en base de datos mysql y mostrarlo

Hola a todos, en esta oportunidad traigo un tutorial sencillo, de como subir archivos a mi servidor, guardar el nombre y una descripcion del archivo en una bd de mysql y luego mostrarlo en un listado los registros que voy ingresando, todo esto hecho con UPLOADIFY v2.1.4; antes que nada quiero decir que lo hice con esta version porque es con la cual he trabajado hasta ahora, las ultimas versiones no las probé aun, se que hay algunos cambios , pero con esta version funciona perfectamente, pueden descargala de aqui y lo copiamos en el proyecto que crearemos mas adelante, bueno ahora manos a la obra.

1.- El primer lugar pues hay que tener instalado un emulador de servidor web local, ya sea xampp, wamp o app server, el cual sea de su agrado, para este ejemplo yo tengo instalado el xampp 1.7.2  (uds pueden descargarse el xampp la ultima version o anteriores aqui )y obviamente ejecutando los servicios  de apache y de mysql

2.- Una vez que tenemos nuestros servicios ejecutándose, procedemos a crear la base de datos en la cual vamos a guardar el nombre de la imagen concatenado con un numero aleatorio de php, para que no guarde archivos con el mismo nombre y una descripción de la imagen y un estado, para luego mostrar solo las imagenes que esten activas es decir que su estado sea 1; para eso en el navegador en la barra de direcciones escribimos localhost o 127.0.0.1 y nos aparece la interfaz de xampp , nos vamos a herramientas y elegimos phpMyAdmin, una vez dentro creamos la bd tutorial

Luego una tabla llamada imagenes con la siguiente estructura

3.- Una vez que ya hemos creado nuestra tabla, ahora procedemos a realizar un proyecto php con la IDE que mas les agrade ya sea eclipse, netbeans u otra, para este caso yo lo he trabajado en netbeans 6.9.1, pero eso si debemos tener la siguiente estructura;(podemos descargarnos la ultima versión de jquery desde aqui) y la copiamos en carpeta js

4.- Una vez que tenemos la estructura anterior procedemos a programar cada uno de los archivos, el codigo es el siguiente:

CARPETA ESTILOS

-archivo estilo.css
body {

background:#fff;

}

.cajas{

background:#F7F8E0;
border:1px solid #00BFFF;
height: 30px;
border-radius:5px;
}
#contenedor{

background-color:#A9E2F3;
width:100%;
border-radius:10px;
margin:50px auto;
}

#nuevaimagen{

background-color:#A9E2F3;

float:left;
}
#listadoimagenes{

margin-left: 50px;
float:left;
}
#mensajevacio{
background: #084B8A url(../images/warning_32x32.png)no-repeat;
padding:10px;
color:#fff;
text-align: center;
width:300px;
border-radius:5px;
}
.botones{
background: #084B8A;
color:#fff;
padding:5px;
border: 1px solid #fff;
border-radius:5px;
cursor:pointer;
}
.botones:hover{
background: #0174DF;

}

#cabecera{
background: #084B8A ;
padding:10px;
color:#fff;
text-align: center;
font-size:14px;
border-radius:5px;
}
.formulario-title{

background: #0B0719;
color:#fff;
padding:5px;
text-align: center;
}

.demoTable {
border-spacing:1px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
background-color:#C3E6FF;
color: #b7b7b7;
width:100%;
margin:auto;
}
.demoTable td, .demoTable tr, .demoTable th{
border-collapse: separate;
border-collapse: collapse;
border-spacing: 0;
}
.demoTable caption {
font-weight: bold;
background: #50ADEA url(../images/corner.gif) no-repeat right top;
border-bottom:2px solid #1975d7;
color: #FFF;
text-transform:uppercase;
padding:10px;
margin:auto;
}

.demoTable td, .demoTable th {
padding: 4px;
}

.demoTable thead th {
text-align: center;
background: #C3E6FF;
color: #0B173B;
border: 1px solid #C3E6FF;
text-transform:uppercase;
}

.demoTable tr:hover{

background:#C3E6FF;
}

.demoTable tbody tr {
background-color:#C3E6FF;
color: #0B173B;
text-align:left;
}
.demoTable tbody tr th {
background-color:#C3E6FF;
color: #2E2E2E;
text-align:left;
}
.demoTable tbody tr.odd {
background: #f9f9f9;
border-top:1px solid #FFF;
}
/*.demoTable tbody tr:hover {
background: red;
border-top:1px solid #FFF;
}*/
.demoTable tbody tr:hover{

background: #fff;
color:#000;
}
.demoTable tbody tr {
height:50px;
background: #FAFAFA;
border: 1px solid #FFF;
}

.demoTable tbody tr.odd td{
background: #f9f9f9;
border-top:1px solid #FFF;
}

.demoTable td a:link, .demoTable td a:visited {
color: #0B3861;
text-decoration: none;
}

.demoTable td a:hover {
color: #0B3861;
border-bottom:2px solid #8FD5FF;
text-decoration: none ;
}

.demoTable tfoot th, .demoTable tfoot td {
background-color:#fff; padding:10px;
text-align:center;
font-family:Georgia, “Times New Roman”, Times, serif;
font-size:22px; font-weight:bold; font-style:italic;
border-bottom:3px solid #CCC;
border-top:1px solid #DFDFDF;
}

CARPETA IMAGES

-Para la carpeta images nos descargamos las siguientes imagenes

CARPETA JS

-archivo funciones.js
$(document).ready(function(){
verformularionuevaimagen();

verlistadoimagenes();

})

function verformularionuevaimagen()
{
var randomnumber=Math.random()*11;
$.post(‘nuevaimagen.php’, {
randomnumber:randomnumber
}, function(data){

$(“#nuevaimagen”).html(data).slideDown(‘slow’);
});
}
function verlistadoimagenes()
{
var randomnumber=Math.random()*11;
$.post(‘libs/listadoImagenes.php’, {
randomnumber:randomnumber
}, function(data){

$(“#listadoimagenes”).html(data).slideDown(‘slow’);
});
}

archivo nuevaimagen.js,- es aqui donde configuramos nuestro uploadify y le especificamos la carpeta donde queremos que nos guarde el archivo

$(document).ready(function() {
$(“#file_upload”).fileUpload({
‘uploader’: ‘uploadify/uploader.swf’,//ruta del boton para subir el archivo
‘cancelImg’: ‘uploadify/cancel.png’,//boton para cacelar la carga del archivo
‘script’: ‘libs/subirarchivo.php’,  //archivo que realiza la accion de subir el archivo al servidor y guardar en la bd

‘folder’: ‘uploads’, //directorio en el cual queremos que se guarde el archivo
‘buttonText’: ‘examinar’, //texto que contiene el boton
‘checkScript’: ‘uploadify/check.php’, //archivo que hace la verificacion de la subida de la imagen y si hay archivos con el mismo nombre
‘fileDesc’: ‘archivos imagen’,
‘auto’:false,//la subida no es atuomatica sino cuando nosotros hacemos clic en guardar imagen
‘fileExt’: ‘*.jpg;*.jpeg;*.gif;*.png’, //tipos de archivo a seleccionar , para este caso imagenes

‘multi’: false,//solo un archivo a la vez puedo subir
‘displayData’: ‘percentage’,//el avance de la subida al servidor se muestra en porcentajes
onComplete: function (){
verlistadoimagenes();  //una vez que guarda el archivo me ejecuta la funcion que lista los registros de la tabla imagenes
$(“#txtdes”).val(”);//limpia el textarea
}

});
$(‘#txtdes’).bind(‘change’, function(){
$(‘#file_upload’).fileUploadSettings(‘scriptData’,’&des=’+$(this).val());//capturo el valor del textarea y lo envio para poder insertarlo al archivo subirarchivo.php
});

})

function startUpload(id, conditional) //funcion que me realiza la carga teniendo como requisito obligatorio ingresar algo en la descripcion(recibe el id del file y el id del textarea)
{ if(conditional.value.length != 0) {
$(‘#’+id).fileUploadStart();
} else
alert(“ingrese un descripción para la imagen”);
}

CARPETA LIBS

-archivo conexion.php

<?php
function Conectarse(){
$servidor=”localhost”;
$basededatos=”tutorial”;
$usuario=”root”;
$clave=””;
$cn=mysql_connect($servidor,$usuario,$clave) or die (“Error conectando a la base de datos”);
mysql_select_db($basededatos ,$cn) or die(“Error seleccionando la Base de datos”);
mysql_query (“SET NAMES ‘utf8′”);
return $cn;}
?>

-archivo listadoimagenes.php

<?php

require_once(‘conexion.php’);
$cn=Conectarse();

$listar= mysql_query(“select * from imagenes where ImagenEstado=1″,$cn);
if(mysql_num_rows($listar)>0)
{
echo”<table class=’demoTable’>”;
echo”<caption>LISTADO DE IMAGENES</caption>”;
echo”<tr>”;
echo”<th>Estado</th>”;
echo”<th>Descripcion</th>”;
echo”<th>Miniatura</th>”;
echo”</tr>”;
while($imagen=(mysql_fetch_array($listar)))
{
echo”<tr>”;
if($imagen[‘ImagenEstado’]==1){
echo”<td><img src=’images/001_18.png’ width=’20’></td>”;
}
else
{
echo”<td><img src=’images/001_19.png’ width=’20’></td>”;
}
echo”<td>”.$imagen[‘ImagenDescripcion’].”</td>”;

echo”<td><a href=’uploads/”.$imagen[‘ImagenArchivo’].”‘ ‘><img src=’uploads/”.$imagen[‘ImagenArchivo’].”‘ width=’70’ height=’50’></a></td>”;

echo”</tr>”;
}
echo”</table>”;
}else
{
echo”<div id=’mensajevacio’>no existen imagenes registradas</div>”;

}
?>

-archivo subirarchivo.php

<?php
include_once(“conexion.php”);//archivo que contiene la conexion
try {
$cn = Conectarse();
$arrayreempla=array(‘/’,’ ‘);
$targetPath = $_SERVER[‘DOCUMENT_ROOT’] . $_REQUEST[‘folder’] . ‘/’;
$archivo= str_replace($arrayreempla,”, $_FILES[‘Filedata’][‘name’]);
$tempFile = $_FILES[‘Filedata’][‘tmp_name’];

$imagen= md5(mt_rand(2147483647, 4294967294)) . _ . $archivo;
$targetFile = str_replace(‘//’, ‘/’, $targetPath) . $imagen;
$resultadoi = mysql_query(“INSERT INTO imagenes (ImagenDescripcion,ImagenArchivo,ImagenEstado)values(‘”.$_REQUEST[‘des’].”‘,'”.$imagen.”‘,1)”,$cn);
if ($resultadoi) {
echo “1”;
move_uploaded_file($tempFile, $targetFile);
} else {
echo “0”;
}
} catch (Exception $ex) {

echo “0”;
}
?>

CARPETA RAÍZ

 – archivo index.php
<!–ESTILO GENERAL –>
<link rel=”stylesheet” href=”estilos/estilo.css” type=”text/css” />

<!–JQUERY –>
<script src=”js/jquery-1.3.2.min.js” type=”text/javascript” ></script><!–se modifica por la version de jquery que tengan –>

<!–PARA SUBIR ARCHIVOS –>
<link rel=”stylesheet” href=”uploadify/uploadify.css” type=”text/css” />
<script src=”js/jquery-1.3.2.min.js” type=”text/javascript” ></script>
<script type=”text/javascript” src=”uploadify/jquery.uploadify.js”></script>

<!–FUNCIONES GENERALES –>
<script type=”text/javascript” src=”js/funciones.js”></script>

<div id=”cabecera”><h1>TUTORIAL SUBIR ARCHIVOS AL SERVIDOR Y GUARDAR NOMBRE EN BD CON LISTADO</h1></div>
<div id=”contenedor”>
<div id=”nuevaimagen”>
</div>
<div id=”listadoimagenes”>
</div>
</div

– archivo nuevaimagen.php

<script type=”text/javascript” src=”js/nuevaimagen.js”></script>

<form >
<div class=”formulario-title”>
<span >REGISTRAR IMAGENES</span>
</div>
<div >

<div >

<div >
<table >

<tr>

<td >
<span >Breve descripcion</span><br/>
<textarea class=”cajas” cols=”” name=”txtdes” id=”txtdes” style=”width: 400px;height: 80px” ></textarea>
</td>
<td>
<span >Agregar Imagen</span><br/>
<input id=”file_upload” type=”file” name=”file_upload” />

</td>
</tr>
<tr>

</table>
</div>
</div>
</div>
<div >

<input class=”botones” type=”button” value=”Guardar Imagen” onclick=”javascript:startUpload(‘file_upload’, document.getElementById(‘txtdes’))”/>

</div>
</form>

5.- El siguiente paso es descomprimir el archivo uploadify y  copiar la carpeta uploadify que descargamos en el link que les pase al principio en nuestra carpeta raiz de nuestro proyecto

6.- Ahora si hemos hecho todo bien ejecutamos nuestro proyecto y debería de verse así

7.- Hacemos clic en examinar y seleccionamos la imagen que queremos subir

8.- Ahora si queremos guardar la imagen sin haber ingresado una descripcion nos muestra el siguiente mensaje

9.- Ahora si ingresamos una descripcion

10.- Hacemos clic en Guardar Imagen y automaticamente nos muestra el listado con el registro ingresado y la imagen

11.- Ahora verificamos si realmente subio el archivo de imagen a la carpta uploads de mi proyecto

como dije anteriormente al nombre del archivo le agrega un numero aleatorio entre dos numeros de varias cifras para no guardar archivos del mismo nombre

12.- Por ultimo verficamos en la BD que se haya insertado el registro, aunque con solo ver que aparece el listado se verifica, pero de todas maneras 🙂

Como vemos funciona perfectamente…. eso es todo por ahora… gracias por la atencion brindada;  comentarios, criticas constructivas o sugerencias serán bien recibidas..

Hasta otra otra oportunidad 🙂

DEMO

3 comentarios el “Upload de archivos para php con uploadify v2.1.4 , guardar en base de datos mysql y mostrarlo

  1. Hola, que tal…!!
    Estuve cacharreando con su aporte ( muy valioso) y me funciona perfectamente solo que y he hecho una pequeña modificación para se ponga de manera automática en la descripción (un código que quiero almacenar en la base de datos que me servira posteriormente para llamar la imagen). http://t-funky.com/disenio/uploadimages/index.php

    Resulta que he querido llevarlo a otra implmentacion que esta en el siguiente link. http://t-funky.com/disenio/comercial/c2.php mi propósito es que al dar click en un listado generado (al dar otro click previamente) y segun el numero de lista y generar un conjunto de información referente a esa numero (entre ellas documentos adjuntos- imagenes) – he querido implementar su gestor de carga de imágenes por que lo relaciona con una base de datos y hace llamados tambien de las imagenes…lo trate de hacer y me carga la ventana para seleccionar la imagen pero luego no hace mas .. ya le hecho muchas pruebas y nasa .. quizás usted me ppedad ayudar viendo el código que se genera en el navegador (estaría eternamente agradecido)

    Saludos

  2. Muy bueno el tutorial!! me encanto bastante ademas de que me ayudo para hacer mi propia pagina, te agredezco mucho. El tutorial esta muy bien detallado y explicado!!.
    Muchas Gracias!!!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s