BAHAGIAN# Sistem Pemindahan Fail Cekap Menggunakan HTTP untuk Set Data Besar

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 でチャンクアップロードを使用する理由は何ですか?

• 大きなファイルの場合、小さなチャンクに分けてアップロードすると、1 つのチャンクが失敗した場合でもプロセスが続行されます。チャンクごとの再試行が可能になるため、信頼性が向上します。

CSS コード (chunked-file-upload.css):

主なスタイル:

1. #ドロップエリア:

   • Sempadan Putus-putus: Secara visual menunjukkan kawasan di mana pengguna boleh menjatuhkan fail.
   • Kesan Serlahkan: Warna jidar berubah apabila fail diseret ke atas.

2. Bar Kemajuan:

   • #progress-bar: Lebar dikemas kini secara dinamik untuk menggambarkan kemajuan muat naik.

3. Senarai Fail:

   • #file-list .file-status: Menambah jarak dan gaya untuk memaparkan nama fail, saiz dan status.

Mengapa menggayakan elemen ini?

• Antara muka mesra pengguna membantu pengguna memahami tindakan yang boleh mereka lakukan (seret dan lepas, pemilihan fail) dan memberi maklum balas tentang status muat naik/muat turun mereka.

---

Kesimpulan:

Sistem ini membenarkan fail besar dimuat naik dengan pasti dalam ketulan dan memberikan maklum balas kepada pengguna melalui bar kemajuan dan kemas kini status. Selain itu, bahagian muat turun memberikan pengguna keupayaan untuk memuat turun fail yang dimuat naik. Menggabungkan Bootstrap, JavaScript dan PHP memastikan sistem ini mesra pengguna dan berfungsi.

Menyambung Pautan

Jika anda mendapati siri ini membantu, sila pertimbangkan untuk memberi repositori bintang di GitHub atau berkongsi siaran pada rangkaian sosial kegemaran anda ?. Sokongan anda amat bermakna bagi saya!

Jika anda mahukan kandungan yang lebih berguna seperti ini, sila ikuti saya:

• LinkedIn
• GitHub

Kod Sumber

Atas ialah kandungan terperinci BAHAGIAN# Sistem Pemindahan Fail Cekap Menggunakan HTTP untuk Set Data Besar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!