JavaScript を使用してファイルをアップロードするには?

JavaScript を使用してファイルをアップロードする方法

JavaScript を使用してファイルをアップロードするには、次の手順を利用できます:

1. フォームを使用するデータ:

   • ファイルと追加データを保存する FormData オブジェクトを作成します。
   • formData.append() を使用してファイルをフォーム データに追加します。

2. XHR を作成するリクエスト:

   • XMLHttpRequest (XHR) オブジェクトを作成します。
   • リクエスト メソッドを「POST」に設定し、URL をアップロード エンドポイントに設定します。
   • XHR オブジェクトの body プロパティを formData に設定します。 .

3. アップロード イベントをリッスンする:

   • load 、 progress 、およびイベント リスナーを XHR オブジェクトに追加します。エラー イベント。
   • これらのイベント ハンドラーでは、アップロード ステータスと応答。

コード例:

const formData = new FormData();
const fileInput = document.getElementById('image-file');
const file = fileInput.files[0];

formData.append('photo', file);

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

xhr.addEventListener('load', () => {
  // Handle successful upload
});

xhr.addEventListener('progress', (e) => {
  // Monitor upload progress
});

xhr.addEventListener('error', (e) => {
  // Handle upload errors
});

純粋な JavaScript:

XHR を使用せずに純粋な JavaScript を使用したい場合は、FormData でフェッチ API を使用できます。 .

例:

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();

formData.append("photo", photo);
fetch('/upload/image', { method: "POST", body: formData });

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