JavaScript を使用してファイルをサーバーに送信し、アップロードの進行状況を監視するにはどうすればよいですか?

JavaScript でのファイルの送信

ユーザーがファイルを選択できるボタンを表す HTML 要素 があるとします。ボタンをクリックしてファイルを選択すると、その名前が document.getElementById("image-file").value に保存されます。サーバーが URL「/upload/image」でのマルチパート POST リクエストをサポートしている場合、そのエンドポイントにファイルを送信するにはどうすればよいでしょうか?さらに、アップロードの進行状況はどのように監視しますか?

Fetch を使用した純粋な JavaScript

オプションの await-try-catch 処理を備えたフェッチ API を使用できます:

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

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

Async-Try-Catch を使用した例

この例には、次のように送信されたユーザー データも含まれています。 JSON:

async function SavePhoto(inp) {
  let user = { name: 'john', age: 34 };
  let formData = new FormData();
  let photo = inp.files[0];

  formData.append("photo", photo);
  formData.append("user", JSON.stringify(user));

  const ctrl = new AbortController(); // for timeout
  setTimeout(() => ctrl.abort(), 5000);

  try {
    let r = await fetch('/upload/image', {
      method: "POST",
      body: formData,
      signal: ctrl.signal,
    });
    console.log('HTTP response code:', r.status);
  } catch (e) {
    console.log('Huston we have problem...:', e);
  }
}</p>
<h3>アップロードの進行状況の監視</h3>
<p>残念ながら、request.onprogress のようなメソッドは、フェッチを使用した HTML5 ファイルのアップロードではサポートされていませんが、ネットワーク イベントをリッスンすることで全体的なアップロードの進行状況を監視できます。 :</p>
<pre class="brush:php;toolbar:false">let xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', function(e) {
  if (e.lengthComputable) {
    let percentComplete = (e.loaded / e.total) * 100;
    console.log('Upload progress:', percentComplete + '%');
  }
});

xhr.open('POST', '/upload/image');
xhr.send(formData);

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