제공된 HTML, PHP, JavaScript 및 CSS 코드를 분석해 보겠습니다. 청크 파일 업로드 대시보드를 부분별로 표시합니다.

HTML 코드:

구조 개요:

• 레이아웃용 부트스트랩: 코드는 Bootstrap 4.5.2를 사용하여 두 가지 주요 섹션이 있는 반응형 레이아웃을 만듭니다.
  • 청크 업로드 섹션: 대용량 파일을 청크로 업로드합니다.
  • 다운로드 섹션: 이전에 업로드한 파일을 나열하고 다운로드합니다.

주요 요소:

• : 이 입력을 사용하면 여러 파일을 선택할 수 있습니다.
• : 업로드 진행률을 표시하는 자리 표시자.
• : 업로드하기 전에 선택한 파일을 표시하는 자리 표시자.
• 파일 업로드: 업로드 프로세스를 시작하는 버튼입니다.
• 파일 다운로드: 다운로드 가능한 파일 목록을 가져오고 표시하는 버튼입니다.

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(파일 중 파일 허용): 선택한 각 파일을 반복합니다.
   • const Chun = file.slice(start, end): 업로드할 파일의 일부를 청크로 잘라냅니다.
   • uploadChunk(): 각 청크를 재귀적으로 업로드하고, 진행률 표시줄과 상태를 업데이트하고, 서버에서 청크를 병합합니다.

4. 파일 다운로드:

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

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

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

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

주요 스타일:

1. #drop-area:

   • 점선 테두리: 사용자가 파일을 놓을 수 있는 영역을 시각적으로 나타냅니다.
   • 하이라이트 효과: 파일을 드래그하면 테두리 색상이 변경됩니다.

2. 진행률 표시줄:

   • #progress-bar: 업로드 진행 상황을 반영하여 너비가 동적으로 업데이트됩니다.

3. 파일 목록:

   • #file-list .file-status: 파일 이름, 크기 및 상태를 표시하기 위한 간격과 스타일을 추가합니다.

이러한 요소의 스타일을 지정하는 이유는 무엇입니까?

• 사용자 친화적인 인터페이스는 사용자가 수행할 수 있는 작업(끌어서 놓기, 파일 선택)을 이해하는 데 도움이 되며 업로드/다운로드 상태에 대한 피드백을 제공합니다.

결론:

이 시스템을 사용하면 대용량 파일을 안정적으로 청크로 업로드할 수 있으며 진행률 표시줄과 상태 업데이트를 통해 사용자에게 피드백을 제공할 수 있습니다. 또한 다운로드 섹션에서는 사용자에게 업로드된 파일을 다운로드할 수 있는 기능을 제공합니다. Bootstrap, JavaScript 및 PHP를 결합하면 시스템이 사용자 친화적이면서도 기능적입니다.

링크 연결

이 시리즈가 도움이 되었다면 GitHub에서 저장소에 별표를 표시하거나 즐겨찾는 소셜 네트워크에서 게시물을 공유해 보세요. 여러분의 지원은 저에게 큰 의미가 될 것입니다!

이와 같이 더 유용한 콘텐츠를 원하시면 언제든지 저를 팔로우하세요.

• 링크드인
• GitHub

소스 코드