Vamos analisar os códigos HTML, PHP, JavaScript e CSS fornecidos para um painel de upload de arquivo em partes, parte por parte.

Código HTML:

Visão geral da estrutura:

• Bootstrap for Layout: O código usa Bootstrap 4.5.2 para criar um layout responsivo com duas seções principais:
  • Seção de uploads em partes: para fazer upload de arquivos grandes em partes.
  • Seção de downloads: Para listar e baixar arquivos carregados anteriormente.

Elementos principais:

• : Esta entrada permite a seleção de vários arquivos.
• : espaço reservado para exibir o progresso do upload.
• : espaço reservado para mostrar os arquivos selecionados antes do upload.
• Fazer upload de arquivos: Botão para iniciar o processo de upload.
• Baixar arquivos: Botão para buscar e exibir a lista de arquivos para download.

Código PHP (arquivo fragmentado-upload.php):

Este arquivo lida com a lógica do servidor de upload de arquivos em partes.

Peças principais:

1. Receber pedaços e metadados:

   • $_FILES['fileChunk']: Recebe o pedaço do arquivo que está sendo enviado.
   • $_POST['chunkIndex']: O índice do pedaço atual.
   • $_POST['totalChunks']: O número total de pedaços do arquivo.

2. Armazenamento de blocos:

   • $chunkFilePath = $targetDir . "$fileName.part$chunkIndex": Cada pedaço é salvo como um arquivo .part separado até que o arquivo final seja montado.

3. Mesclando pedaços:

   • if ($chunkIndex == $totalChunks - 1): Quando o último pedaço é carregado, o script mescla todos os pedaços no arquivo final.

4. Resposta de retorno:

   • Uma resposta JSON é retornada ao cliente com o status do upload e detalhes do arquivo.

Por que usar fragmentação?

• Arquivos grandes são divididos em pedaços menores para evitar tempos limite e problemas de memória, tornando o processo de upload mais confiável.

Código PHP (download.php):

Lida com downloads de arquivos.

Peças principais:

1. $_GET['file']: recupera o nome do arquivo da string de consulta do URL.
2. Construção do caminho do arquivo:
   • $filePath = $targetDir . $fileName: Constrói o caminho completo do arquivo.
3. Baixar arquivo:
   • readfile($filePath): Envia o arquivo para o cliente como um stream para download.

Por que usá-lo?

• Permite que os usuários baixem arquivos diretamente do servidor. O servidor envia cabeçalhos adequados para solicitar ao navegador que baixe o arquivo em vez de exibi-lo.

Código PHP (get_files.php):

Lista todos os arquivos enviados disponíveis para download.

Peças principais:

1. scandir($targetDir): verifica o diretório em busca de todos os arquivos enviados.
2. array_diff(): Filtra. e .. da lista de arquivos.
3. echo json_encode(array_values($files)): Retorna a lista de arquivos como uma matriz JSON.

Por que usá-lo?

• Fornece uma lista dinâmica de arquivos disponíveis para download, que é atualizada a cada solicitação.

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

Lida com a lógica do lado do cliente de uploads e downloads de arquivos em partes.

Peças principais:

1. Arrastar e soltar:

   • preventDefaults(e): Impede que o navegador abra arquivos quando soltos.
   • handleDrop(e): Manipula arquivos descartados e os exibe.

2. Exibir lista de arquivos:

   • displayFileList(files): Mostra os arquivos selecionados com seus tamanhos e status na lista de arquivos antes do upload.

3. Enviando arquivos em pedaços:

   • for (deixe o arquivo de arquivos): Faz um loop por cada arquivo selecionado.
   • const chunk = file.slice(start, end): Fatia uma parte do arquivo para fazer upload como um pedaço.
   • uploadChunk(): carrega recursivamente cada pedaço, atualiza a barra de progresso e o status e mescla os pedaços no servidor.

4. Baixar arquivos:

   • $.ajax({url: './src/get_files.php'}): Envia uma solicitação AJAX para obter a lista de arquivos enviados.
   • downloadFile(fileName): Inicia o download redirecionando o usuário para download.php.

Por que usar upload fragmentado em JS?

• Para arquivos grandes, o upload em pedaços menores garante que o processo continue mesmo se um pedaço falhar. Ele melhora a confiabilidade, permitindo novas tentativas pedaço por pedaço.

Código CSS (chunked-file-upload.css):

Estilos principais:

1. #área de queda:

   • Borda tracejada: indica visualmente a área onde os usuários podem soltar arquivos.
   • Efeito de destaque: A cor da borda muda quando um arquivo é arrastado.

2. Barra de progresso:

   • #progress-bar: a largura é atualizada dinamicamente para refletir o progresso do upload.

3. Lista de arquivos:

   • #file-list .file-status: Adiciona espaçamento e estilos para exibir o nome, tamanho e status do arquivo.

Por que estilizar esses elementos?

• Uma interface amigável ajuda os usuários a entender quais ações eles podem realizar (arrastar e soltar, seleção de arquivos) e fornece feedback sobre o status de seus uploads/downloads.

Conclusão:

Este sistema permite que arquivos grandes sejam carregados de forma confiável em partes e fornece feedback aos usuários por meio de uma barra de progresso e atualizações de status. Além disso, a seção de download oferece aos usuários a capacidade de baixar os arquivos enviados. A combinação de Bootstrap, JavaScript e PHP garante que o sistema seja amigável e funcional.

Links de conexão

Se você achou esta série útil, considere dar uma estrela ao repositório no GitHub ou compartilhar a postagem em suas redes sociais favoritas ?. Seu apoio significaria muito para mim!

Se você quiser mais conteúdo útil como este, sinta-se à vontade para me seguir:

• LinkedIn
• GitHub

Código Fonte