जावास्क्रिप्ट में फ़ाइलें भेजना

मान लीजिए कि आपके पास एक HTML तत्व है जो एक बटन का प्रतिनिधित्व करता है जो उपयोगकर्ताओं को एक फ़ाइल का चयन करने देता है। बटन पर क्लिक करने और फ़ाइल चुनने पर, उसका नाम document.getElementById('image-file').value में संग्रहीत हो जाता है। यदि सर्वर यूआरएल "/अपलोड/इमेज" पर बहु-भागीय POST अनुरोधों का समर्थन करता है, तो आप फ़ाइल को उस एंडपॉइंट पर कैसे भेजेंगे? इसके अतिरिक्त, आप अपलोड की प्रगति की निगरानी कैसे करते हैं?

फ़ेच के साथ शुद्ध जावास्क्रिप्ट

आप वैकल्पिक प्रतीक्षा-कोशिश-कैच हैंडलिंग के साथ फ़ेच एपीआई का उपयोग कर सकते हैं:

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);
  }
}