PART# 대용량 데이터 세트에 HTTP를 사용하는 효율적인 파일 전송 시스템

Let's break down the provided HTML, PHP, JavaScript, and CSS code for a chunked file upload dashboard part by part.

HTML Code:

Structure Overview:

• Bootstrap for Layout: The code uses Bootstrap 4.5.2 to create a responsive layout with two main sections:
  • Chunked Uploads Section: For uploading large files in chunks.
  • Downloads Section: For listing and downloading previously uploaded files.

Key Elements:

• : This input allows multiple file selection.
• : Placeholder for displaying upload progress.
• : 업로드하기 전에 선택한 파일을 표시하는 자리 표시자.
• 파일 업로드: 업로드 프로세스를 시작하는 버튼
• 파일 다운로드: 다운로드 가능한 파일 목록을 가져오고 표시하는 버튼입니다.

PHP 코드(chunked-file-upload.php):

이 파일은 파일을 청크로 업로드하는 서버측 로직을 처리합니다.

주요 부품:

1. 청크 및 메타데이터 수신:

   • $_FILES['fileChunk']: 업로드 중인 파일의 청크를 받습니다.
   • $_POST['chunkIndex']: 현재 청크의 인덱스.
   • $_POST['totalChunks']: 파일의 총 청크 수.

2. 청크 스토리지:

   • $chunkFilePath = $targetDir . "$fileName.part$chunkIndex": 각 청크는 최종 파일이 조립될 때까지 별도의 .part 파일로 저장됩니다.

3. 청크 병합:

   • if ($chunkIndex == $totalChunks - 1): 마지막 청크가 업로드되면 스크립트는 모든 청크를 최종 파일에 병합합니다.

4. 답변:

   • 업로드 상태 및 파일 세부정보와 함께 JSON 응답이 클라이언트에 반환됩니다.

청킹을 사용하는 이유는 무엇입니까?

• 대용량 파일은 시간 초과 및 메모리 문제를 방지하기 위해 작은 단위로 나누어 업로드 프로세스를 더욱 안정적으로 만듭니다.

PHP 코드(download.php):

파일 다운로드를 처리합니다.

주요 부품:

1. $_GET['file']: URL 쿼리 문자열에서 파일 이름을 검색합니다.
2. 파일 경로 구성:
   • $filePath = $targetDir . $fileName: 파일의 전체 경로를 구성합니다.
3. 파일 다운로드:
   • readfile($filePath): 파일을 다운로드 가능한 스트림으로 클라이언트에 보냅니다.

왜 그것을 사용합니까?

• 사용자가 서버에서 직접 파일을 다운로드할 수 있습니다. 서버는 파일을 표시하는 대신 브라우저에 파일을 다운로드하라는 메시지를 표시하기 위해 적절한 헤더를 보냅니다.

PHP 코드(get_files.php):

업로드된 모든 파일을 다운로드할 수 있도록 나열합니다.

주요 부품:

1. scandir($targetDir): 디렉토리에서 업로드된 모든 파일을 검색합니다.
2. array_diff(): 필터링하여 . 그리고 .. 파일 목록에서.
3. echo json_encode(array_values($files)): 파일 목록을 JSON 배열로 반환합니다.

왜 그것을 사용합니까?

• 다운로드할 수 있는 동적 파일 목록을 제공하며 요청 시마다 업데이트됩니다.

JavaScript 코드(chunked-file-upload.js):

청크 파일 업로드 및 파일 다운로드의 클라이언트측 로직을 처리합니다.

주요 부품:

1. 드래그 앤 드롭:

   • preventDefaults(e): 브라우저가 파일을 드롭할 때 열리지 않도록 합니다.
   • handleDrop(e): 삭제된 파일을 처리하고 표시합니다.

2. 파일 목록 표시:

   • displayFileList(files): 업로드 전 선택한 파일의 크기와 상태를 파일 목록에 표시합니다.

3. 청크로 파일 업로드:

   • for(let file of files): 선택한 각 파일을 반복합니다.
   • const Chunk = file.slice(start, end): 업로드할 파일의 일부를 청크로 잘라냅니다.
   • uploadChunk(): 각 청크를 재귀적으로 업로드하고, 진행률 표시줄과 상태를 업데이트하고, 서버에서 청크를 병합합니다.

4. 파일 다운로드:

   • $.ajax({url: './src/get_files.php'}): 업로드된 파일 목록을 가져오기 위해 AJAX 요청을 보냅니다.
   • downloadFile(fileName): 사용자를 download.php로 리디렉션하여 다운로드를 시작합니다.

JS에서 청크 업로드를 사용하는 이유는 무엇입니까?

• 대용량 파일의 경우 더 작은 청크로 업로드하면 한 청크가 실패하더라도 프로세스가 계속됩니다. 청크 단위 재시도를 허용하여 안정성을 향상시킵니다.

CSS 코드(chunked-file-upload.css):

주요 스타일:

1. #드롭 영역:

   • Bordure pointillée : indique visuellement la zone dans laquelle les utilisateurs peuvent déposer des fichiers.
   • Effet de surbrillance : La couleur de la bordure change lorsqu'un fichier est déplacé.

2. Barre de progression :

   • #progress-bar : la largeur est mise à jour dynamiquement pour refléter la progression du téléchargement.

3. Liste des fichiers :

   • #file-list .file-status : ajoute un espacement et des styles pour afficher le nom, la taille et l'état du fichier.

Pourquoi styliser ces éléments ?

• Une interface conviviale aide les utilisateurs à comprendre les actions qu'ils peuvent effectuer (glisser-déposer, sélection de fichiers) et donne des informations sur l'état de leurs téléchargements/importations.

---

Conclusion :

Ce système permet de télécharger de manière fiable des fichiers volumineux par morceaux et fournit aux utilisateurs des commentaires via une barre de progression et des mises à jour de statut. De plus, la section de téléchargement donne aux utilisateurs la possibilité de télécharger des fichiers téléchargés. La combinaison de Bootstrap, JavaScript et PHP garantit que le système est à la fois convivial et fonctionnel.

Liens de connexion

Si vous avez trouvé cette série utile, pensez à donner une étoile au référentiel sur GitHub ou à partager la publication sur vos réseaux sociaux préférés ?. Votre soutien signifierait beaucoup pour moi !

Si vous souhaitez du contenu plus utile comme celui-ci, n'hésitez pas à me suivre :

• LinkedIn
• GitHub

Code source

위 내용은 PART# 대용량 데이터 세트에 HTTP를 사용하는 효율적인 파일 전송 시스템의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!