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 上給 存儲庫 一個星號或在您最喜歡的社交網絡上分享該帖子？ 。您的支持對我來說意義重大！

如果您想要更多類似的有用內容，請隨時關注我：

• 領英
• GitHub

原始碼

以上是PART# 使用 HTTP 進行大型資料集的高效能檔案傳輸系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！