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

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

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

1. フォーム データの使用:

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

2. XHR リクエストの作成:

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

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

   • load 、 progress 、および error イベントのイベント リスナーを 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
});

Pure 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 サイトの他の関連記事を参照してください。