عند استخدام CSS لتجميل عناصر النموذج، لم تكن هناك طريقة جيدة لتجميل التحكم في تحميل الملف. http://www.quirksmode.org/dom/inputfile.html (يبدو أن موقع الويب به خطأ) يوفر طريقة لتجميل التحكم في تحميل الملف. مستوحاة من هذه الطريقة، قمت بدمج مشاريعي الخاصة لتحسين وظائفها بعد التحسينات، وهي تتميز بالخصائص التالية:
لقد قمت بتغليفه في مكون إضافي لـ jQuery، نظرًا لوجود مكون إضافي يسمى jQuery.fakeFile على الإنترنت بالفعل، ومن أجل تمييزه، سأسميه jQuery.liveFakeFile. ستقدم هذه المقالة مبدأ واستخدام هذه الطريقة.
1. الطلب
المتطلب بسيط للغاية، ولكن تنفيذه يحتاج إلى مهارات معينة، نلخصها بإيجاز على النحو التالي:
2. التحليل
أدرك تأثير ظهور مربع حوار تحديد الصورة بالنقر فوق الزر
يوجد مربع إدخال أمام عنصر التحكم في تحميل النص، مستوحى من مايكل ماكجرادي ( ترجمت هذه المقالة ذات مرة)، قمنا بإنشاء زر "تحميل صورة"، ثم قمنا بتغيير خاصية العتامة لعنصر التحكم في تحميل الملف، واضبطها على 0. واستخدم خاصية تحديد المواقع لجعل منطقة النقر أعلى الزر. وبهذه الطريقة، تبدو كل نقرة يقوم بها المستخدم بمثابة زر تم النقر عليه، ولكنه في الواقع هو عنصر التحكم في تحميل النص نفسه.
عرض الصور المحددة من قبل المستخدم
يبدو عرض الصور بسيطًا جدًا، ولكن هناك اختلافات بين المتصفحات. لا يستطيع IE6 عرض الصور بشكل صحيح، ويمكن لـ IE7 عرضها باستخدام مرشح AlphaImageLoder. لا يستطيع Firefox عرض الصور بشكل طبيعي، لكن لديه طريقة لعرض الصور — getAsDataURL(). لا تستطيع المتصفحات الأخرى Opera وSafari عرض الصور بشكل صحيح. لذلك، نستخدم تقنية تحسس المتصفح لمعالجة المتصفحات المختلفة بشكل منفصل، ونسمح فقط للمتصفحات التي لا يمكنها عرض الصور بعرض النص بشكل طبيعي.
تحديد تنسيق الصورة
ما عليك سوى اجتياز التحقق من التعبير العادي عند تشغيل حدث التغيير للتحكم في تحميل الملف بمجرد استيفاء متطلبات التنسيق، سيتم عرض الصورة أو نص المطالبة، وإلا سيتم عرض رسالة خطأ.
تحليل سهولة الاستخدام
نظرًا لاستخدام js لتغيير مظهر التحكم في تحميل الملف، يجب التأكد من أنه يمكن للمستخدمين تحميل الصور بشكل طبيعي عند تعطيل js. لذا فإن ما نضعه في بنية html يجب أن يكون تحكمًا عاديًا في تحميل الملفات.