JavaScript を使用してファイルをサーバーに送信するにはどうすればよいですか?

JavaScript を使用したファイルのアップロード

Web ページでユーザーがファイル入力要素を使用してファイルを選択できる場合、選択されたファイルの名前は次の場所から取得できます。 document.getElementById("画像ファイル").value.しかし、このファイルをサーバーに送信するにはどうすればよいでしょうか?

ファイルのアップロードに関して、JavaScript ではいくつかの方法が提供されています。 1 つのオプションは、Fetch API を使用することです。

Pure JS (Fetch)

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();
     
formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

このアプローチでは、formData オブジェクトを作成し、選択したファイルをそれに追加して、 Fetch を使用して formData を指定された URL に送信します。

ファイル アップロード ステータス通知

ファイル アップロードの完了をリッスンするには、XMLHttpRequest オブジェクトを使用して FormData オブジェクトを作成できます。そして、その onreadystatechange イベント リスナーを設定します。ファイルのアップロードが完了すると、イベントのreadyStateプロパティは4.

// Register file input
const fileInput = document.getElementById('image-file');

// Add event listener for onreadystatechange
fileInput.addEventListener('change', (e) => {
  const files = e.target.files;
  
  if (files.length > 0) {
    // Create a FormData object
    const formData = new FormData();
    
    // Append selected files to FormData object
    for (const file of files) {
      formData.append('files', file);
    }

    // Create an XMLHttpRequest object
    const xhr = new XMLHttpRequest();

    // Open a POST request to the server
    xhr.open('POST', '/upload/image');

    // Set the onreadystatechange event listener
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          // File upload completed successfully
          console.log('File uploaded successfully!');
        } else {
          // File upload failed
          console.error('File upload failed!');
        }
      }
    };

    // Send the FormData object
    xhr.send(formData);
  }
});

になります。

以上がJavaScript を使用してファイルをサーバーに送信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。