Bagaimana untuk menghantar fail ke pelayan dan memantau kemajuan muat naiknya menggunakan JavaScript?

Menghantar Fail dalam JavaScript

Andaikan anda mempunyai elemen HTML yang mewakili butang yang membolehkan pengguna memilih fail. Setelah mengklik butang dan memilih fail, namanya disimpan dalam document.getElementById("image-file").value. Jika pelayan menyokong permintaan POST berbilang bahagian di URL "/upload/image", bagaimanakah anda menghantar fail ke titik akhir itu? Selain itu, bagaimanakah anda memantau kemajuan muat naik?

JavaScript Tulen dengan Ambil

Anda boleh menggunakan API pengambilan dengan pengendalian tunggu-cuba-tangkap pilihan:

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

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

Contoh dengan Async-Try-Catch

Contoh ini juga termasuk data pengguna yang dihantar sebagai 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>Memantau Kemajuan Muat Naik</h3>
<p>Malangnya, kaedah seperti request.onprogress tidak disokong dalam muat naik fail HTML5 dengan fetch, tetapi anda boleh memantau keseluruhan kemajuan muat naik dengan mendengar acara rangkaian:</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);

Atas ialah kandungan terperinci Bagaimana untuk menghantar fail ke pelayan dan memantau kemajuan muat naiknya menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!