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

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.