• 0

كيف أظهر الصور قبل تحميلها؟

أستعمل :

 <input type="file" multiple>

لتحميل العديد من الصور، لكن أريد إظهار الصور المحددة على الصفحة قبل تحميلها إلى الخادم -Server-، حتى أتأكد من أنها هي التي اخترت -مثال الصور المرفقة مع الأسئلة هنا في موقع أكاديمية حسوب-. كيف ذلك؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

html5 أتت مع  File API spec والتي تسمح باستعمال تفاعلي للملفات الموجودة محليا على التطبيقات دون اللجوء إلى تحميلها على السيرفر، مما يعني أنك تستطيع إظهار الصور أوأي نوع من الملفات على متصفحك دون الحاجة إلى رفعها.

تتيح  FileReader لتطبيقات الويب التفاعل مع الملفات بشكل غير متزامن asynchronously.

ليكون كودنا على الشكل التالي:

  • كود html5:
<input type="file" id="files" />
<img id="image" />
  • كود JavaScript:
document.getElementById("files").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        //   thumbnailإظهار البيانات على شكل .
        document.getElementById("image").src = e.target.result;
    };

    //  URL قراءة الصور انطلاقا من .
    reader.readAsDataURL(this.files[0]);
};

مقال مفيد حول الموضوع: using the File APIs in JavaScript.

تمّ تعديل بواسطة E.Nourddine

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن