提供されている HTML、PHP、JavaScript、および CSS コードを分解してみましょうチャンク ファイルの場合は、ダッシュボードをパーツごとにアップロードします。

HTML コード:

構造の概要:

• レイアウト用のブートストラップ: このコードはブートストラップ 4.5.2 を使用して、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 (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. #ドロップエリア:

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

2. 進行状況バー:

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

3. ファイルリスト:

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

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

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

結論：

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

接続リンク

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

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

• リンクトイン
• GitHub

ソースコード