Antes que nada quiero decir que lo hice con esta versión porque es con la cual he trabajado hasta ahora, las últimas versiones no las probé aún, sé que hay algunos cambios , pero con esta versión funciona perfectamente. Pueden descargala de aquí y lo copiamos en el proyecto que crearemos más adelante. Bueno, ahora manos a la obra.
En primer lugar pues, hay que tener instalado un emulador de servidor Web local, ya sea xampp, wamp o app server, el que sea de su agrado. Para este ejemplo yo tengo instalado el xampp 1.7.2 (uds pueden descargarse el xampp la última versión o anteriores aquí )y obviamente ejecutando los servicios de Apache y de MySQL.
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 número 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 sólo las imágenes que estén activas, es decir que su estado sea 1; para eso en el navegador en la barra de direcciones escribimos localhosto 127.0.0.1 y nos aparece la interfaz de xampp. Nos vamos a herramientas y elegimos phpMyAdmin. Una vez dentro creamos la base de datos “tutorial”.
Luego una tabla llamada imágenes con la siguiente estructura:
Una vez que ya hemos creado nuestra tabla, ahora procedemos a realizar un proyecto PHP con la IDE que más les agrade, ya sea eclipse, netbeans u otra, para este caso yo lo he trabajado en netbeans 6.9.1, pero eso sí, debemos tener la siguiente estructura:(podemos descargarnos la ultima versión de jquery desde aquí) y la copiamos en la carpeta js.
Una vez que tenemos la estructura anterior procedemos a programar cada uno de los archivos. El código es el siguiente:
Carpeta estilos
Archivo estilo.css
Código :
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 imágenes:
Carpeta js
Archivo funciones.js
Código :
$(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 aquí donde configuramos nuestro uploadify y le especificamos la carpeta donde queremos que nos guarde el archivo.
Código :
$(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
Código :
Archivo listadoimagenes.php
Código :
0)
{
echo””;
echo””;
echo””;
echo””;
echo””;
echo””;
echo””;
while($imagen=(mysql_fetch_array($listar)))
{
echo””;
if($imagen['ImagenEstado']==1){
echo””;
}
else
{
echo””;
}
echo””;
echo””;
echo””;
}
echo”LISTADO DE IMAGENES
Estado Descripcion Miniatura 
”.$imagen['ImagenDescripcion'].” 
”;
}else
{
echo”
no existen imagenes registradas
”;
}
?>
Archivo subirarchivo.php
Código :
Carpeta Raíz
Archivo index.php
Código :
TUTORIAL SUBIR ARCHIVOS AL SERVIDOR Y GUARDAR NOMBRE EN BD CON LISTADO
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 raíz de nuestro proyecto.
Ahora, si hemos hecho todo bien, ejecutamos nuestro proyecto y debería de verse así
Hacemos clic en examinar y seleccionamos la imagen que queremos subir:
Ahora, si queremos guardar la imagen sin haber ingresado una descripción, nos muestra el siguiente mensaje:
Ingresamos una descripción:
Hacemos clic en Guardar Imagen y automáticamente nos muestra el listado con el registro ingresado y la imagen:
Ahora verificamos si realmente subió el archivo de imagen a la carpeta uploads de mi proyecto:
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 atención brindada; comentarios, críticas constructivas o sugerencias serán bien recibidas.
Hasta otra oportunidad.
0 comentarios:
Publicar un comentario