JavaScriptでファイルアップロードを実装する方法

インターネットの発展に伴い、ファイルのアップロードは人々が Web サイトやアプリケーションを使用するための基本的な要件になりました。画像、ビデオ、ドキュメント、その他の種類のファイルをアップロードする場合、JavaScript は開発者がファイル アップロード機能を簡単に実装できる非常に便利なツールです。

この記事では、JavaScriptを使用してファイルアップロード機能を実装する方法を紹介します。ファイルの選択、検証、サーバーへのアップロードのプロセスと、アップロードが完了または失敗した場合の対処方法について説明します。

ファイルの選択

ファイルをアップロードする最初のステップは、アップロードするファイルを選択することです。ファイル選択機能はHTML5の<input type="file">タグを利用して簡単に実装できます。このタブにはファイル選択ボックスがポップアップ表示され、ユーザーはローカル ファイル システムからアップロードするファイルを選択できます。

<input type="file" id="fileInput">

JavaScript では、input 要素の value 属性を取得することで、ユーザーが選択したファイルのファイル名を取得できます。

const fileInput = document.querySelector('#fileInput');
const fileName = fileInput.value;

ファイルの確認

ファイルを選択した後、ファイルが要件を満たしているかどうかを確認する必要があります。ファイルの種類とサイズが要件を満たしていることを確認できます。

一部のファイル タイプは、HTML5 の accept 属性を使用してフロントエンドで制限できます。例:

<input type="file" id="fileInput" accept=".jpg,.png,.gif">

これにより、ユーザーは .jpg のみを選択できるように制限されます。 .png、.gif ドキュメント。

ファイル サイズの制限 ファイル サイズは JavaScript で計算し、制限値と比較できます。例:

const fileInput = document.querySelector('#fileInput');
const file = fileInput.files[0];
const maxSize = 10 * 1024 * 1024; // 10MB

if (file.size > maxSize) {
  alert('文件太大了');
  return;
}

ファイルのアップロード

これで、ファイルの選択と検証が完了しました。をアップロードするには、次のステップはそれをアップロードすることです。 Ajax テクノロジーを使用してファイル データをサーバーに送信できます。

const fileInput = document.querySelector('#fileInput');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.send(formData);

上記のコードでは、FormData オブジェクトを使用してファイル データをフォームにラップし、XMLHttpRequest オブジェクトを使用してフォームをサーバ。サーバーは、ファイル システムへの保存やデータベースへの保存など、アップロードされたファイルを必要に応じて処理できます。

アップロードの完了または失敗の状況の処理

最後に、ファイルのアップロードが成功したか失敗したかをユーザーに伝えるために、アップロードの完了または失敗の状況を処理する必要があります。

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');

xhr.addEventListener('load', () => {
  if (xhr.status >= 200 && xhr.status < 300) {
    alert('上传成功');
  } else {
    alert('上传失败');
  }
});

xhr.send(formData);

上記のコードでは、アップロード プロセスのステータスを監視するイベント リスナーを追加しました。 xhr.status の値が 200 ～ 299 の場合、アップロードは成功します。それ以外の場合、アップロードは失敗します。

概要

JavaScript は、ファイルのアップロードに便利なツールです。 <input type="file"> タグを使用してファイルを選択し、JavaScript を使用してファイルを検証し、ファイル データをサーバーに送信して、アップロードの完了または失敗を処理します。これらの簡単な手順は、ファイル アップロード機能を簡単に実装するのに役立ちます。

以上がJavaScriptでファイルアップロードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。