9 مقتطفات حقل تحميل ملف مفتوح المصدر مخصص

يمكنك العثور على أدوات رائعة لتحسين نماذج الويب ، بدءًا من مجموعات واجهة المستخدم إلى ملحقات jQuery المتقدمة.

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

إذا كنت تأمل في تخصيص مدخلات التحميل ، فسيساعدك هذا المعرض. لقد جمعت 9 حقول تحميل يدويًا من CodePen تثبت أنه يمكنك إعادة تصميم الحقل ليبدو كما تريد.

1. تحميل ملف ثابت

قام المطور Wallace Erick بإنشاء حقل التحميل المسطح هذا بقليل من CSS و JavaScript. إنه يستعير اتجاه التصميم المسطح ، والذي يتجنب التدرجات من خلال التركيز على الألوان الفردية - غالبًا باستخدام نظام ألوان أحادي اللون.

يمكنك إضافة تصميم تحميل الملف هذا إلى أي صفحة وجعلها تبدو رائعة. كل ما عليك فعله هو تغيير نظام الألوان ووضعه بشكل صحيح في النموذج الخاص بك.

إنه يعمل تمامًا كما تتوقع ويتم تشغيله على عنصر إدخال HTML القياسي. لذلك يمكن استخدام هذا أيضًا مع المتصفحات القديمة ويجب أن يعمل على الهاتف المحمول أيضًا.

2. تحميل ملف مخصص

هذا تصميم يصبح أكثر تجريدًا مع حقل التحميل. أنشأ المطور Aaron Vanston تحميل هذا الملف كنسخة طبق الأصل من تلك التي نراها على مواقع الويب الكبيرة.

فكر في مواقع التكنولوجيا الكبيرة مثل Dropbox و Google+ و Facebook. غالبًا ما يكون لديهم منطقة سحب وإفلات مع مساحة كبيرة "انقر هنا" لبدء تشغيل نافذة التحميل. هذا بالضبط ما فعله آرون بهذا المقتطف.

يعتمد على jQuery وكمية جيدة من JS / CSS للعمل. وبينما يستخدم حقل إدخال HTML القياسي ، فإنه يتعامل أيضًا مع عملية التحميل باستخدام وظائف JS المخصصة.

إذا كنت تعرف طريقك حول JavaScript ، فيمكن أن يعمل هذا كقالب مفيد لبناء واجهة مستخدم تحميل الملفات الخاصة بك.

3. رافع متحرك مستجيب

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

ألق نظرة على هذا التصميم للحصول على مثال على حقل تحميل عالي الجودة ومناسب للجوّال. إنه أساسي للغاية ، مع مساحة تحميل صغيرة مربعة مع دعم السحب والإفلات.

فقط لاحظ أن هذا لا يستخدم عنصر الإدخال - لذلك لا توجد طريقة للنقر للتحميل. أعتقد أن هذا كابوس قابلية للاستخدام ، ولكن هذا أيضًا مجرد مقتطف عينة يستخدم للاختبار - لذلك فهو غير موجه نحو سهولة الاستخدام المثالية.

إذا قمت بإحضار هذا المقتطف إلى موقعك ، فمن المستحسن أن تقوم بإضافة حقل تحميل نموذجي إلى جانب منطقة السحب والإفلات.

4. رافع مخصص

تعد مشاريع التطوير اليومية طريقة رائعة لصقل مهاراتك. اتبعت Drew Vosburg هذا النهج لبناء نموذج تحميل لطيف يتم استضافته مجانًا على CodePen.

إنه مخصص بشكل كبير مع وظائف JavaScript التي تتعامل مع تأثير السحب والإفلات. لكن حقل الإدخال هذا مبني بالفعل لدعم كل من اللمس والنقر ، جنبًا إلى جنب مع السحب والإفلات.

المنطقة القابلة للنقر عبارة عن ملصق HTML مصمم باستخدام CSS. يتم إرفاق عنصر التسمية هذا بحقل الإدخال ، والذي يكون مخفيًا خارج الصفحة. إنه يعمل تمامًا مثل حقل قابل للنقر. بالتأكيد فكرة ذكية ومن الدلالي تمامًا التمهيد.

5. واجهة تحميل صور الأسهم

إليك أحد أكثر المقتطفات تعقيدًا وإعجابًا التي رأيتها على CodePen. يتيح لك تحميل الصور إلى معرض مباشرة من جهاز الكمبيوتر الخاص بك. مع كل صورة تقوم بتحميلها ، ستظهر لك معاينة مباشرة على الصفحة.

إنه يعمل عن طريق سحب الصور من خلال JavaScript ، ثم تحويلها إلى base64 لتضمينها في CSS.

عندما تقوم بتحميل الصور إلى خادم ، فسيقومون بإنشاء ملف مؤقت. على الخادم الخاص بك ، يمكنك استخدام هذا الملف المؤقت لعرض الصورة. ولكن الآن بما أن CSS تدعم base64 ، فهذا بديل آخر.

الواجهة فائقة النقاء وتندمج ميزة التحميل.

6. بسيط الأزرق تحميل واجهة المستخدم

إذا كنت تبحث عن حقل تحميل خالٍ من JS ، فقم بإلقاء نظرة على هذا المثال ، الذي أنشأه ستيفن بيكر.

يستخدم CSS3 النقي لتغيير نمط الإدخال إلى زر كبير واحد. إنه يعمل مع أيقونة التحميل Font Awesome ويلتف ببساطة بمنطقة دائرية كاملة حول حقل التحميل.

يمكنك تغيير النمط أو اللون أو الرمز أو أي شيء آخر لجعل هذا يتطابق مع موقعك. إنه في الأساس بديل نظيف للغاية لأسلوب الإدخال الافتراضي ويعمل على CSS3 النقي.

7. jQuery إدخال تحميل ملف مخصص

أخذ المطور Terry Young القليل من jQuery واستخدمه لتحسين بعض حقول التحميل الحالية. هذه هي النتيجة (وهي نتيجة واحدة ، إذا كان بإمكاني قول ذلك).

من خلال هذه الأنماط ، يمكنك تغيير نص حقل التحميل أو الحجم أو لون الزر أو إزالة حقل النص لاستخدام زر واحد فقط.

لاحظ أن هذا يتطلب قدرًا جيدًا من jQuery لأن معظم هذه الميزات لا يمكن تغييرها باستخدام CSS. إذا كنت لا تمانع في العمل مع jQuery ، فهذه الخيارات استثنائية.

8. ملف إدخال UI مسطح

إليك حقل تحميل مسطح مختلف قليلاً أنشأه جيفري كروفت. يعتمد هذا أيضًا على بعض JavaScript ، ولكنه يصمم المدخل بالكامل بخصائص CSS3.

نظرًا لأن هذا نموذج مقتطف ، فلا يمكنك فعليًا تحميل الملفات في أي مكان. ولكن ، من السهل تغيير ذلك إذا قمت بنقل هذا إلى موقعك الخاص. التصميم الأساسي والإعداد هو حقًا ما يمنح هذا المقتطف بعض الحياة.

تعمل وظيفة الإرجاع في JavaScript ، لذلك يمكنك التعامل مع تحميلات الملفات أو التغييرات التي تظهر على الشاشة أو أي شيء آخر.

أفضل ما في الأمر أن هذه الأكواد تعمل في المتصفحات التي يعود تاريخها إلى IE 8! لذلك فهو خيار قوي جدًا إذا كنت مهتمًا بإمكانية الوصول.

9. متعددة تحميل الحقول

إليك حقل مخصص نهائي واحد مع لمسة: يبدو بسيطًا جدًا من الناحية الجمالية - لكن الجائزة الحقيقية تكمن في الوظيفة.

تم تصميم حقل التحميل هذا لدعم ملفات متعددة في وقت واحد. لا ترى هذا عادةً مع حقول الإدخال - أو على الأقل ليس افتراضيًا. يتعين على المستخدمين تحديد ملفات متعددة في نفس النافذة وتحتاج الواجهة الخلفية إلى دعم ذلك.

باستخدام هذا المقتطف ، يمكنك سرد جميع أسماء الملفات في حقل تحميل واحد. يمكنك حتى استخدام JavaScript لإلحاق أسماء الملفات هذه في مكان آخر على الصفحة في العرض العادي.