إرسال الملفات في JavaScript

افترض أن لديك عنصر HTML يمثل زرًا يتيح للمستخدمين تحديد ملف. عند النقر فوق الزر واختيار ملف، يتم تخزين اسمه في document.getElementById("image-file").value. إذا كان الخادم يدعم طلبات POST متعددة الأجزاء على عنوان URL "/upload/image"، فكيف يمكنك إرسال الملف إلى نقطة النهاية تلك؟ بالإضافة إلى ذلك، كيف يمكنك مراقبة تقدم التحميل؟

JavaScript خالص مع Fetch

يمكنك استخدام واجهة برمجة تطبيقات الجلب مع معالجة اختيارية لانتظار محاولة الالتقاط:

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

مراقبة تقدم التحميل

لسوء الحظ، طرق مثل request.onprogress غير مدعومة في تحميل ملف HTML5 مع الجلب، ولكن يمكنك مراقبة تقدم التحميل الإجمالي من خلال الاستماع إلى أحداث الشبكة:

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