Desglosemos el código HTML, PHP, JavaScript y CSS proporcionado para obtener un panel de carga de archivos fragmentados, parte por parte.

Código HTML:

Descripción general de la estructura:

• Bootstrap para diseño: El código utiliza Bootstrap 4.5.2 para crear un diseño responsivo con dos secciones principales:
  • Sección de cargas fragmentadas: para cargar archivos grandes en fragmentos.
  • Sección de Descargas: Para enumerar y descargar archivos cargados previamente.

Elementos clave:

• : Esta entrada permite la selección de múltiples archivos.
• : marcador de posición para mostrar el progreso de la carga.
• : marcador de posición para mostrar los archivos seleccionados antes de cargarlos.
• Subir Archivos: Botón para iniciar el proceso de carga.
• Descargar archivos: botón para buscar y mostrar la lista de archivos descargables.

Código PHP (carga-archivo-fragmentado.php):

Este archivo maneja la lógica del lado del servidor para cargar archivos en fragmentos.

Partes clave:

1. Recibir fragmentos y metadatos:

   • $_FILES['fileChunk']: Recibe la parte del archivo que se está cargando.
   • $_POST['chunkIndex']: El índice del fragmento actual.
   • $_POST['totalChunks']: el número total de fragmentos del archivo.

2. Almacenamiento parcial:

   • $chunkFilePath = $targetDir . "$fileName.part$chunkIndex": Cada fragmento se guarda como un archivo .part independiente hasta que se ensambla el archivo final.

3. Fusionando fragmentos:

   • if ($chunkIndex == $totalChunks - 1): Cuando se carga el último fragmento, el script fusiona todos los fragmentos en el archivo final.

4. Devolver respuesta:

   • Se devuelve una respuesta JSON al cliente con el estado de carga y los detalles del archivo.

¿Por qué utilizar fragmentación?

• Los archivos grandes se dividen en partes más pequeñas para evitar tiempos de espera y problemas de memoria, lo que hace que el proceso de carga sea más confiable.

Código PHP (descargar.php):

Maneja las descargas de archivos.

Partes clave:

1. $_GET['file']: recupera el nombre del archivo de la cadena de consulta URL.
2. Construcción de ruta de archivo:
   • $filePath = $targetDir . $fileName: construye la ruta completa del archivo.
3. Descarga de archivos:
   • readfile($filePath): envía el archivo al cliente como una secuencia descargable.

¿Por qué usarlo?

• Permite a los usuarios descargar archivos directamente desde el servidor. El servidor envía encabezados adecuados para solicitar al navegador que descargue el archivo en lugar de mostrarlo.

Código PHP (get_files.php):

Enumera todos los archivos cargados disponibles para descargar.

Partes clave:

1. scandir($targetDir): escanea el directorio en busca de todos los archivos cargados.
2. array_diff(): filtra. y .. de la lista de archivos.
3. echo json_encode(array_values($files)): Devuelve la lista de archivos como una matriz JSON.

¿Por qué usarlo?

• Proporciona una lista dinámica de archivos disponibles para descargar, que se actualiza con cada solicitud.

Código JavaScript (file-upload.js fragmentado):

Maneja la lógica del lado del cliente de cargas y descargas de archivos fragmentados.

Partes clave:

1. Arrastrar y soltar:

   • preventDefaults(e): evita que el navegador abra archivos cuando se suelta.
   • handleDrop(e): maneja los archivos caídos y los muestra.

2. Mostrar lista de archivos:

   • displayFileList(files): muestra los archivos seleccionados con sus tamaños y estados en la lista de archivos antes de cargarlos.

3. Carga de archivos en fragmentos:

   • para (dejar archivo de archivos): recorre cada archivo seleccionado.
   • const chunk = file.slice(start, end): corta una parte del archivo para cargarlo como un fragmento.
   • uploadChunk(): carga recursivamente cada fragmento, actualiza la barra de progreso y el estado y fusiona los fragmentos en el servidor.

4. Descargar archivos:

   • $.ajax({url: './src/get_files.php'}): envía una solicitud AJAX para obtener la lista de archivos cargados.
   • downloadFile(fileName): Inicia la descarga redirigiendo al usuario a download.php.

¿Por qué utilizar la carga fragmentada en JS?

• Para archivos grandes, cargarlos en fragmentos más pequeños garantiza que el proceso continúe incluso si un fragmento falla. Mejora la confiabilidad al permitir reintentos fragmento por fragmento.

Código CSS (carga-archivo-fragmentado.css):

Estilos clave:

1. #área de colocación:

   • Borde discontinuo: indica visualmente el área donde los usuarios pueden colocar archivos.
   • Efecto de resaltado: el color del borde cambia cuando se arrastra un archivo.

2. Barra de progreso:

   • #progress-bar: El ancho se actualiza dinámicamente para reflejar el progreso de la carga.

3. Lista de archivos:

   • #file-list .file-status: agrega espacios y estilos para mostrar el nombre, el tamaño y el estado del archivo.

¿Por qué diseñar estos elementos?

• Una interfaz fácil de usar ayuda a los usuarios a comprender qué acciones pueden realizar (arrastrar y soltar, selección de archivos) y brinda comentarios sobre el estado de sus cargas y descargas.

Conclusión:

Este sistema permite cargar archivos grandes de manera confiable en fragmentos y proporciona a los usuarios comentarios a través de una barra de progreso y actualizaciones de estado. Además, la sección de descarga ofrece a los usuarios la posibilidad de descargar archivos cargados. La combinación de Bootstrap, JavaScript y PHP garantiza que el sistema sea fácil de usar y funcional.

Enlaces de conexión

Si esta serie te resultó útil, considera darle al repositorio una estrella en GitHub o compartir la publicación en tus redes sociales favoritas. ¡Tu apoyo significaría mucho para mí!

Si quieres más contenido útil como este, no dudes en seguirme:

• LinkedIn
• GitHub

Código fuente