Observe que la lista sin ordenar con los "archivos" de identificación está vacía. No se preocupe por eso ahora, ya que completaremos esa sección con los archivos en el servidor.

Paso 3 - Añadir CSS y JS

Usé jQuery para crear la capacidad de cambiar la visibilidad de ciertos tipos de archivos sin tener que actualizar la página.
Esto es puramente opcional y la eliminación de JS acelerará un poco la carga de la página. Así que vamos a agregar las siguientes líneas a la CABEZA del archivo HTML.

Estoy cargando el jQuery desde una fuente externa en tiempo de ejecución. Nuevamente, si lo prefiere, puede cambiar esto para que el archivo se cargue desde una fuente local con esta línea.

Cargar el archivo directamente desde code.jquery.com garantiza que estemos usando la última versión y ahorramos nuestro ancho de banda en cada carga de la página, pero si el servidor code.jquery.com no se encuentra abarrotado o está saturado, es posible que no obtengamos el archivo. cuando lo necesitamos.

Cree una nueva carpeta llamada style y cree un nuevo archivo CSS con el nombre style.css. Este será el archivo que le dice al navegador cómo queremos que se vea la página. Hay bastante CSS aquí, pero es lo suficientemente simple para que cualquiera lo pueda seguir..

Ahora la página debería verse como la siguiente.

 @CHARSET "ISO-8859-1"; cuerpo fondo-color: #cddcec; Familia tipográfica: "Arial"; tamaño de fuente: 11px;  div # container width: 600px; margen: 0px auto; borde: 1px sólido # e6eef6; color de fondo: #ffffff;  div # container h1 background-color: # 4b75b3; margen: 0px; relleno: 8px; Familia tipográfica: "Arial"; fuente-peso: normal; borde: 1px sólido # 3564a9;  div # container fieldset margin: 20px; borde: 1px sólido # 98b9d0;  ul # menu list-style-type: none; margen: 4px; relleno: 0px;  ul # menu li float: left; margen: 4px;  ul # menu li.active background-color: # 98b9d0; borde izquierdo: 1px sólido # 3564a9; borde superior: 1px sólido # 3564a9; borde inferior: 1px sólido # e6eef6; borde derecho: 1px sólido # e6eef6;  ul # menu li a text-decoration: none; tamaño de fuente: 10px; relleno: 2px; color: # 3564a9;  ul # files tipo de estilo de lista: ninguno; margen: 40px 0px 0px 0px; relleno: 0px;  ul # files li background-color: # fff7c0; borde inferior: 1px sólido #efefef; relleno: 2px; margen inferior: 1px; 

Lo que deberíamos tener ahora se ilustra en la siguiente imagen..

Paso 4 - Manejo de envíos de entrada de archivos con PHP

Comencemos el lado de PHP del tutorial creando una clase de Configuración. En esta clase podemos guardar la contraseña de carga, así como la ruta del archivo para la carpeta de cargas.
Luego podemos incluir la clase en nuestra página y usar sus valores cuando sea necesario..
Puedes escribir archivos PHP con prácticamente las mismas herramientas que usas para escribir HTML y CSS, solo recuerda guardar el archivo con el sufijo .php.

Sin profundizar en la Programación Orientada a Objetos (OOP), lo que hace el código es crear una nueva clase con el tipo de valores a los que se puede acceder sin crear una instancia de la clase.
Ahora podemos acceder a sus valores simplemente llamando a Configuración :: $ contraseña; y Configuraciones :: $ uploadFolder; Este es también el lugar donde puede cambiar la contraseña cuando lo desee..
los marca el comienzo y el final de un segmento de código PHP. Estos segmentos se pueden escribir dentro de las páginas HTML normales y el servidor los interpretará cuando se solicite la página..

Ok, ahora llegamos al negocio. En el archivo html con el que hemos estado trabajando, agreguemos lo siguiente en la parte superior del archivo. Si antes de la etiqueta.

  
Primero le decimos al intérprete de PHP que incluya nuestro archivo de configuración. También he configurado una nueva variable $ mensaje. Más adelante escribiré la información del proceso en esta variable y la mostraré al usuario.
 
 // ¿El usuario ha subido algo? if (isset ($ _ FILES ['file'])) 
 
Si el formulario se ha enviado con un archivo, la matriz $ _FILE debe tener un valor con la clave que usamos como nombre del campo de entrada del archivo.
 
 $ target_path = Configuración :: $ uploadFolder; $ target_path = $ target_path. hora() . '_'. nombre base ($ _FILES ['archivo'] ['nombre']);
 
Aquí obtenemos la ruta a la carpeta de carga que especificamos en la configuración. En la línea 2, agregamos (concatenar) el nombre del archivo cargado en la ruta de destino.
Tenga en cuenta también que he agregado la marca de tiempo del servidor actual al principio del nombre de archivo. Hay dos razones para que yo haga esto.
Primero se usa para almacenar la fecha y, segundo, se asegurará de que todos los archivos tengan nombres diferentes.
Si estuviéramos usando una base de datos detrás de esta aplicación, la hora de agregar estaría allí, y podríamos serializar los nombres de archivo y guardar el nombre original solo en la tabla de la base de datos,
pero como no hay una base de datos, podemos usar esta solución.
 
 // Verifique la contraseña para verificar la carga legal si ($ _ POST ['password']! = Configuración :: $ contraseña) $ message = "¡Contraseña no válida!";  else 
 
Si el envío se realizó sin proporcionar ninguna contraseña o si la contraseña dada era diferente a la definida en la configuración, no manejaremos el archivo y solo devolveremos un mensaje que indique una contraseña falsa.
 
 // Intente mover el archivo cargado a la carpeta designada si (move_uploaded_file ($ _ FILES ['file'] ['tmp_name'], $ target_path)) $ message = "The file". nombre base ($ _FILES ['archivo'] ['nombre']). "ha sido subido";  else $ message = "Se produjo un error al cargar el archivo, ¡inténtalo de nuevo!"; 
 
Ok, entonces la contraseña era correcta, ¿y ahora qué? Ahora "guardamos" el archivo. Digo guardar entre paréntesis ya que el archivo ya está en el servidor; es solo en la carpeta temporal.
Entonces, para que el archivo sea accesible y para asegurarnos de que el servidor no lo elimine cuando se elimine la temperatura, debemos moverlo a algún lugar seguro. He usado la función move_uploaded_file.
La función toma dos argumentos. Primero está el nombre temporal del archivo asignado automáticamente por el servidor, y el otro es la ruta de destino que asignamos anteriormente.
La función devuelve un valor booleano que indica una operación exitosa. Nuevamente configuramos el valor del mensaje para informar al usuario de lo sucedido..
 
 if (strlen ($ mensaje)> 0) $ mensaje = '
'. $ mensaje. '
'; 
 
¡Y así de fácil es subir archivos al servidor con PHP! Aquí acabo de verificar si se ha escrito algo en la variable del mensaje (longitud mayor que 0) y formatearlo para que podamos aplicarle estilo con CSS.
 
Paso 5 - Listar los archivos cargados
 
 / ** LISTA DE ARCHIVOS CARGADOS ** / $ uploaded_files = ""; // Abrir el directorio para leer $ dh = opendir (Configuración :: $ uploadFolder);
 
Lo primero que debes hacer es crear un manejador de carpeta. Todo lo que necesita es un comando. La variable uploaded_files es donde escribiremos los nombres de archivo de la carpeta en formato HTML.
 
 // LOOP a través de los archivos while (($ file = readdir ($ dh))! == false) 
 
Aquí hacemos un bucle a través de los archivos en la carpeta. Mientras podamos leer el siguiente archivo de la carpeta en la variable de archivo, lo haremos y seguiremos adelante. Una vez que hemos revisado todos los archivos, la función devuelve false y finaliza el ciclo..
 
 if ($ file! = '.' && $ file! = '…') 
 
Los '.' y '...' también son devueltos por esta función, así que tendremos que asegurarnos de no intentar hacer nada con ellos..
 
 $ filename = Configuración :: $ uploadFolder. $ archivo; $ partes = explotar ("_", $ archivo);
 
Agregamos el nombre del archivo en la ruta de la carpeta de cargas y lo guardamos como variable de nombre de archivo. Luego explotamos el nombre del archivo en el carácter '_'.
Esta función devuelve una matriz de cadenas que dividen la cadena original cada vez que hay un '_'.
Como hay uno de esos caracteres, recibiremos una matriz con la parte de marca de tiempo como celda 1 y el nombre del archivo original como celda 2.
 
 $ size = formatBytes (tamaño de archivo ($ nombre de archivo)); $ added = date ("m / d / Y", $ parts [0]); $ origName = $ partes [1];
 
Ahora que tenemos el valor de marca de tiempo como su propia cadena, podemos formatearlo en una fecha y guardar el nombre del archivo original como su propia variable.
La función de tamaño de archivo provista por PHP devuelve el tamaño del archivo solo en bytes, por lo que lo formatearemos de una forma más legible con la función formatBytes, que está cubierta en un bit.
 
 $ filetype = getFileType (substr ($ archivo, strlen ($ archivo) - 3)); $ uploaded_files. = "
$ origName $ size - $ agregado
\norte";
 
Al cargar un archivo en el servidor, PHP nos proporciona la información del tipo de archivo, pero como no tenemos lugar para almacenar esa información, debemos intentar obtener el tipo de archivo con una función personalizada..
Doy los tres últimos caracteres del nombre del archivo como parámetro a la función getFileType (que se muestra más adelante). Estoy usando la variable filetype para diseñar los diferentes archivos con CSS.
Todo lo que queda ahora es generar una cadena HTML y agregarla a la variable uploaded_files y cerrar el manejador de carpeta.
 
  closedir ($ dh);
 
 if (strlen ($ uploaded_files) == 0) $ uploaded_files = "
No se encontraron archivos
";
 
Si no se encontraron archivos, configure el uploaded_files var para mostrar un mensaje.
 
También tenemos que mostrar la cadena uploaded_files en algún lugar; así que agrega esta línea dentro de la 
 con el id 'archivos'.
 
 
 
Paso 6 - Función auxiliar
 
La función getFileType intenta adivinar qué tipo de archivo es leyendo los últimos caracteres de su nombre. Esto no funcionará con extensiones como .jpeg y .tiff.
Para hacerlo más universal, tendríamos que leer una subcadena que comienza en el período y va al final del nombre del archivo..
Pero si el nombre es algo como my.new.car.pic, obtendríamos new.car.pic como las extensiones..
Así que para que esto funcione realmente tendríamos que encontrar el último punto en el nombre y tomar una subcadena a partir de ahí.
Pero para el alcance de este tutorial esto es lo suficientemente cerca.
 
 función getFileType ($ extensión) $ images = array ('jpg', 'gif', 'png', 'bmp'); $ docs = array ('txt', 'rtf', 'doc'); $ apps = array ('zip', 'rar', 'exe'); if (in_array ($ extension, $ images)) devuelve "Images"; if (in_array ($ extension, $ docs)) devuelve "Documentos"; if (in_array ($ extension, $ apps)) devuelve "Aplicaciones"; regreso ""; 
 
La siguiente función formatea los bytes en un formato más legible. Sólo matemáticas básicas, nada más. La función en sí es de los comentarios de la función PHP.net. 
 
 function formatBytes ($ bytes, $ precision = 2) $ units = array ('B', 'KB', 'MB', 'GB', 'TB'); $ bytes = max ($ bytes, 0); $ pow = floor (($ bytes? log ($ bytes): 0) / log (1024)); $ pow = min ($ pow, count ($ unidades) - 1); $ bytes / = pow (1024, $ pow); vuelta redonda ($ bytes, $ precisión). ". $ units [$ pow];?>
 
Y eso es todo por la parte de PHP. Solo un poco más de JS y CSS y ya hemos terminado..
 
Paso 7 - Un toque de CSS para una mayor legibilidad
 
Lo que tenemos hasta aquí debería ser:
  
Pero para hacer un buen uso de la función getFileType y el nombre de clase que devuelve, he agregado las siguientes líneas de CSS en el archivo style.css.
 
 ul # files li a text-decoration: none; color: # 3564a9; relleno: 2px 25px; posición de fondo: izquierda; repetición de fondo: no repetición;  ul # files li.Documents a background-image: url ('… /images/text.jpg');  ul # files li.Imagen a background-image: url ('… /images/picture.jpg');  ul # files li.Applications a background-image: url ('… /images/zip.jpg');  p.error background-color: # fff7c0; borde inferior: 1px sólido #efefef; font-weight: negrita; color: # ff0000; relleno: 6px; 
 
Estoy asignando un icono a cada tipo de archivo. Los íconos que he usado son de la magnífica colección que se encuentra en http://www.famfamfam.com.
Ahora lo que deberíamos tener es algo como esto.
  
Ah mucho mejor.
 
Paso 8 - Alternar la visibilidad del archivo con jQuery
 
Para un poco de finalización, vamos a agregar algunas funciones adicionales con JavaScript. Crea una nueva carpeta llamada "js" y en esa carpeta crea un nuevo archivo, filestorage.js.
Luego agregue la siguiente línea al final de la página HTML justo antes de  etiqueta.