كيف أقوم برفع صورة من خلال HTML

يمكنك استخدام حقل الإدخال input ضمن نموذج في HTML لإختيار صورة من ملفات الجهاز حتى يتم رفعها إلى خادم الويب كالتالي:

 <form>
  <label for="img">Select image:</label>
  <input type="file" accept="image/*">
  <input type="submit">
</form> 

حيث تتيح لك الخاصية accept السماح باختيار نوع معيّن من الملفات مثل الصور image وملفات الصوت audio/* والفيديو video/* وغيرها.

إكمال الشيفرة البرمجية يتطلب معرفة بآلية عمل خادم الويب وطرق إرسال البيانات بين طرفي المستخدم والخادم لذا حاول البحث عبر الانترنت حسب لغات البرمجة أو أطر العمل التي تتعلمها وستجد العديد من الأمثلة والحلول الكاملة.

يمكنك فعل ذلك من خلال التابع readAsDataURL كما في المثال التالي.

<input type="file" id="the-image" accept="image/jpg, image/png, image/jpeg">

<div id="show-image"></div>

يمكنك أن تجعل المستخدم يرفع الصورة بالصيغىة التي تريد في هذا المثال وضعت أكثر من صغية:

• JPG
• PNG
• JPEG

ويمكنك قبول كل الصيغ من خلال جعل قيمة الخاصية accept تساوي *.

كود CSS مهم لا تتجاهله لاننا سوف نستخدمة من خلال كود JavaScript.

#show-image{
    width: 400px;
    height: 225px;
    border: 1px solid black;
    background-position: center;
    background-size: cover;
}

كود JavaScript.

const image_input = document.querySelector("#the-image");

image_input.addEventListener("change", function() {

  const reader = new FileReader();
  
  reader.addEventListener("load", () => {

    const uploaded_image_from_user = reader.result;
	// نقوم بوضع الصورة في الحاوية بالمعرف المحدد عن طريق كود css
    document.querySelector("#show-image").style.backgroundImage = `url(${uploaded_image_from_user})`;
  });

  reader.readAsDataURL(this.files[0]);
});