JavaScript Fetch API を使用してマスター ファイルをアップロードするにはどうすればよいですか?

JS フェッチ API を使用したファイル アップロードのマスター

JS フェッチ API の操作は、特にファイルのアップロードに取り組む場合、困難になることがあります。このプロセスを段階的に分けて簡略化してみましょう。

1.ファイル入力のキャプチャ

コードで示されているように、ファイル入力要素を使用してユーザーがファイルを選択できるようにします。

<form>
  <div>
    <label>Select file to upload</label>
    <input type="file">
  </div>
  <button type="submit">Convert</button>
</form>

2.送信イベントを処理します

送信イベントをキャッチします (プレースホルダーを希望のイベント ハンドラーに置き換えます):

document.querySelector('form').addEventListener('submit', (event) => {
  // Prevent default form submission
  event.preventDefault();
  
  // Retrieve the selected file
  const input = event.target.querySelector('input[type="file"]');
  
  // Construct the request body
  const formData = new FormData();
  formData.append('file', input.files[0]);
  
  // Submit the request
  fetch('/files', {
    method: 'POST',
    body: formData
  }).then(/* perform necessary actions */);
});

3.リクエスト本文を作成します

フェッチを使用してファイルを送信するには、FormData API を使用します。マルチパート/フォームデータのリクエスト本文を作成します。選択したファイル (input.files[0]) とユーザー情報などの追加データを formData オブジェクトに追加します:

const formData = new FormData();
formData.append('file', input.files[0]);
formData.append('user', 'username');

4.フェッチ リクエストを開始します

リクエスト本文の準備ができたら、エンドポイント URL ('/files') を指定し、本文として formData オブジェクトを指定して、フェッチを使用して POST リクエストを送信します。

fetch('/files', {
  method: 'POST',
  body: formData
})
.then(/* handle the response as desired */);

そして出来上がりです！これで、JS フェッチ API を使用した完全に機能するファイル アップロード メカニズムが完成しました。

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