PART# Système de transfert de fichiers efficace utilisant HTTP pour les grands ensembles de données

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. #ドロップエリア:

   • Bordure pointillée : indique visuellement la zone dans laquelle les utilisateurs peuvent déposer des fichiers.
   • Effet de surbrillance : La couleur de la bordure change lorsqu'un fichier est déplacé.

2. Barre de progression :

   • #progress-bar : la largeur est mise à jour dynamiquement pour refléter la progression du téléchargement.

3. Liste des fichiers :

   • #file-list .file-status : ajoute un espacement et des styles pour afficher le nom, la taille et l'état du fichier.

Pourquoi styliser ces éléments ?

• Une interface conviviale aide les utilisateurs à comprendre les actions qu'ils peuvent effectuer (glisser-déposer, sélection de fichiers) et donne des informations sur l'état de leurs téléchargements/importations.

---

Conclusion :

Ce système permet de télécharger de manière fiable des fichiers volumineux par morceaux et fournit aux utilisateurs des commentaires via une barre de progression et des mises à jour de statut. De plus, la section de téléchargement donne aux utilisateurs la possibilité de télécharger des fichiers téléchargés. La combinaison de Bootstrap, JavaScript et PHP garantit que le système est à la fois convivial et fonctionnel.

Liens de connexion

Si vous avez trouvé cette série utile, pensez à donner une étoile au référentiel sur GitHub ou à partager la publication sur vos réseaux sociaux préférés ?. Votre soutien signifierait beaucoup pour moi !

Si vous souhaitez du contenu plus utile comme celui-ci, n'hésitez pas à me suivre :

• LinkedIn
• GitHub

Code source

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!