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. #drop-area：

   • 破線の境界線: ユーザーがファイルをドロップできる領域を視覚的に示します。
   • ハイライト効果: ファイルをドラッグすると境界線の色が変わります。

2. 進行状況バー:

   • #progress-bar: 幅はアップロードの進行状況を反映して動的に更新されます。

3. ファイルリスト:

   • #file-list .file-status: ファイル名、サイズ、ステータスを表示するためのスペースとスタイルを追加します。

なぜこれらの要素をスタイルするのでしょうか?

• ユーザーフレンドリーなインターフェイスは、ユーザーが実行できるアクション (ドラッグ アンド ドロップ、ファイル選択) を理解し、アップロード/ダウンロードのステータスに関するフィードバックを提供するのに役立ちます。

---

結論:

このシステムにより、大きなファイルをチャンクで確実にアップロードでき、進行状況バーやステータス更新を通じてユーザーにフィードバックが提供されます。さらに、ダウンロード セクションでは、アップロードされたファイルをダウンロードすることができます。 Bootstrap、JavaScript、および PHP を組み合わせることで、システムがユーザーフレンドリーで機能的であることが保証されます。

リンクを接続

このシリーズが役立つと思われた場合は、GitHub で リポジトリ にスターを付けるか、お気に入りのソーシャル ネットワークで投稿を共有することを検討してください。あなたのサポートは私にとって大きな意味を持ちます!

このような役立つコンテンツがさらに必要な場合は、お気軽にフォローしてください:

• LinkedIn
• GitHub

ソースコード

以上がPART# 大規模なデータセットに HTTP を使用した効率的なファイル転送システムの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。