كيفية عرض معاينة الصورة قبل تحميلها إلى الخادم؟

مرحباً بالجميع! أنا مطور واجهات أمامية مبتدئ، وقد واجهت مشكلة. أقوم بإنشاء نموذج لتحميل الصورة الرمزية للمستخدم. أريد أن يتمكن المستخدم من اختيار ملف عبر ``، ورؤية كيف ستبدو الصورة فوراً دون انتظار الإرسال إلى الخادم. لكنني لا أستطيع تحقيق ذلك. إليك الكود الحالي الخاص بي: ```html ``` ```javascript const fileInput = document.getElementById('fileInput'); const preview = document.getElementById('preview'); fileInput.addEventListener('change', function() { const file = this.files[0]; // هنا لا أعرف ماذا أفعل بعد ذلك // حاولت تعيين المسار مباشرة لكنه لم يعمل preview.src = file; // لا يعمل }); ``` المشكلة هي أن `file` هو كائن File وليس سلسلة نصية تحتوي على مسار. قرأت أنه يمكن استخدام FileReader، لكنني لم أفهم تماماً كيف يعمل. أرجو إرشادي.