Bonito navegador de archivos con jQuery y PHP

Hoy queremos compartir contigo un experimento genial. Es un lindo navegador de archivos, que puede cargar en una carpeta en algún lugar de su sitio y compartir documentos, imágenes y otros archivos con el mundo. La aplicación está construida con PHP y jQuery y usa CSS3 de manera extensiva; no se usaron imágenes ni íconos en el diseño, y las animaciones son fluidas y funcionan bien incluso en teléfonos inteligentes.

Cómo usarlo en su sitio

Continúe y tome el archivo zip del botón de descarga de arriba. Descomprímelo y luego súbelo a tu servidor. La carpeta archivos es donde debes colocar todo lo que deseas compartir. No se necesita más configuración:el script no utiliza una base de datos y no se necesita configuración.

La idea

Si desea obtener más información sobre cómo funciona, aquí hay una descripción general de alto nivel de la funcionalidad:

  • Un script PHP - scan.php - escanea los archivos y devuelve todos los archivos y carpetas como un único objeto JSON.
  • Nuestro código JavaScript, con la ayuda de jQuery, toma este JSON y lo convierte en una cuadrícula de archivos y carpetas. Al hacer clic en una carpeta, se vuelve a representar la vista con su contenido.

Debido a que solo hay una solicitud al backend involucrada, la navegación a través de la lista de archivos y la búsqueda son instantáneas. También actualizamos la URL y usamos el evento hashchange para monitorear la navegación usando los botones atrás/adelante.

Te invitamos a jugar con el código:tiene muchos comentarios y es relativamente fácil de seguir.

Forzar la descarga de archivos

Los navegadores abren archivos de texto en lugar de descargarlos. Si desea forzar la descarga de todos los archivos, coloque este archivo .htaccess en los archivos carpeta:

<Files *.*>
ForceType application/octet-stream
</Files>

Debería llamarse .htaccess (con un punto inicial). Este archivo solo es compatible con servidores web Apache.

El diseño

¡El PSD para el diseño está disponible de forma gratuita para todos los suscriptores de nuestro boletín informativo! Únase o inicie sesión desde aquí para descargarlo.

¡Esperamos que encuentre útil nuestro administrador de archivos! Se le pueden agregar muchas cosas geniales, como buscar fotos en una caja de luz, reproducir audio y video, e incluso mejorarlo con funciones de administración de archivos y cargas. ¡Nos encantaría ver qué se te ocurre!