Web開発におけるファイルアップロードのさまざまな実装方法（コード付き）

ファイルのアップロードは、Web 開発における一般的な要件です。ファイルをアップロードするには、ファイル入力ボックスを使用する必要があります。ファイル入力に multiple 属性を追加すると、ファイル (サポートされていないブラウザでは、この属性は自動的に無視されます)

<input multiple type="file">

この入力ボックスをクリックすると、ファイルを選択するためのファイル参照ダイアログ ボックスが開きます。通常、入力ボックスは 1 つで十分です。 1 つのファイルをアップロードすることも、複数のファイルをアップロードすることもできます。複数の入力ボックスを使用してこれを処理できます。これは、multiple 属性をサポートしていないブラウザと互換性を持たせるために行われます。同時に、ユーザーは通常、複数のファイルは選択されません

(推奨学習: HTML ビデオ チュートリアル )

基本的なアップロード方法

フォームにファイル入力ボックスを設置し、フォーム送信時に選択したファイルをまとめて送信し、サーバーにアップロードすることができます。フォームにファイルが含まれている場合は、フォーム要素の enctype を変更する必要があります。属性は multipart/form-data

<form action="#" enctype="multipart/form-data" method="post">
  <input name="file" type="file">
  <button type="submit">Upload</button>
</form>

です。このアップロード方法は従来の同期アップロードですアップロードされたファイルが大きい場合、多くの場合、長時間待つ必要があり、アップロードの完了後にページが再読み込みされます。続行する前に、アップロードが完了するまで待つ必要があります。

初期のブラウザは非同期アップロードをサポートしていませんが、iframe を使用してそれをシミュレートし、ページ内の