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

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

الحقول لنمط ملف الإدخال:

اختر ملف

الآن، يتعين علينا إخفاء ملف الإدخال بحيث تظل التسمية فقط هي المعروضة، والتي سنقوم بتصميمها.

إخفاء ملف الإدخال:

ملف الإدخال (العرض: 0.1 بكسل؛ الارتفاع: 0.1 بكسل؛ العتامة: 0؛ الفائض: مخفي؛ الموضع: مطلق؛ فهرس z: -1؛)

بعد ذلك، نظرًا لبقاء الملصق فقط على الصفحة، فإننا ننتقل إلى تصميمه.

تصميم الملصق

ملف الإدخال + التسمية (حجم الخط: 1.25em؛ وزن الخط: 700؛ اللون: أبيض؛ لون الخلفية: أسود؛ العرض: كتلة مضمنة؛) .inputfile:focus + label، .inputfile + label:hover (background- لون احمر)

وهناك نقاط ينبغي الإشارة إليها، وسنقوم بها. بشكل افتراضي، لا يكون عنصر التسمية قابلاً للنقر عليه، مما يعني أن المؤشر الخاص به سيكون على شكل مؤشر سهم قياسي. لتعيين المؤشر على أنه قابل للنقر، نضيف أيضًا معلمة المؤشر مع مؤشر القيمة.

ملف الإدخال + التسمية (المؤشر: المؤشر؛)

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

ملف الإدخال: التركيز + التسمية (المخطط التفصيلي: 1 بكسل منقط #000؛ المخطط التفصيلي: -webkit-focus-ring-color auto 5px؛)

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

لنعد حقلاً مخفيًا للعمل معه:

كود جافا سكريبت:

var inputs = document.querySelectorAll(".inputfile"); Array.prototype.forEach.call(inputs, function(input) ( var label = input.nextElementSibling, labelVal = label.innerHTML; input.addEventListener("change", function(e) ( var fileName = ""; if(this .files && this.files.length > 1) fileName = (this.getAttribute("data-multiple-caption") || "").replace("(count)"، else e.target.value .split("\\").pop(); if(fileName) label.querySelector("span").innerHTML = fileName else label.innerHTML = labelVal ));

ماذا تفعل إذا تم تعطيل javasvript في المتصفح؟
إنه أمر نادر الحدوث، ولكن يحدث أن المتصفح قد يكون معطلاً كود جافا سكريبت، ماذا تفعل في هذه الحالة؟ لم يتبق شيء لفعله سوى استعادة الرؤية حقل مخفياختيار الملف.

(function(e,t,n)(var r=e.querySelectorAll("html");r.className=r.className.replace(/(^|\s)no-js(\s|$)/, "$1js$2")))(document,window,0);

كود CSS الإضافي:

Js .inputfile (العرض: 0.1 بكسل؛ الارتفاع: 0.1 بكسل؛ العتامة: 0؛ الفائض: مخفي؛ الموضع: مطلق؛ فهرس z: -1؛) .no-js .inputfile + label (عرض: لا شيء؛)

سوف نقوم بإنجاز كل التحول باستخدام أنماط CSSو مسج. عندما تدرس المادة، سترى أنه لا يمكنك التعامل إلا مع CSS، ولكن بعد ذلك لن تتمكن من معرفة الملف الذي تم تحديده. سيتم استخدام jQuery للديناميكيات فقط. عندما ينتهي كل هذا ستكون النتيجة كالتالي:

وجوهر هذا التغيير هو استبدال مجالنا بمجال جديد. في الأساس نفس الطريقة التي وصفتها مؤخرًا في المقالات - و. لذلك دعونا لا نتدخل ودعنا نبدأ في مهمتنا.

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

سيكون لدينا العرض التالي:

تحديد ملف لم يتم تحديد ملف

دعونا ننظر قليلا في ماذا وكيف.

• - نحيط كل شيء في حاوية كتلة. الشرط إلزامي. قم بتعيين الفئة fl_upld للكتلة.
• حدد ملفًا - حقل مرفق الملف الخاص بنا محاط بملصق. هذا هو معرفنا والميدان. نقوم بتعيين معرف = "fl_inp" للحقل نفسه. نفس نقطة مهمة. حسنًا، أضف النص - حدد الملف. سيكون هذا النص على زر المستقبل.
• الملف غير محدد - الكتلة التي تعرض النص في البداية - الملف غير محدد. بعد تحديد ملف، سيظهر اسم الملف بدلاً من هذا النص. نقوم بتعيين معرف = "fl_nm" لهذه الكتلة. سأستبق الأمر وأقول إنه إذا لم تقم بتضمين برنامج نصي لعرض اسم الملف، فلن يتعين عليك إضافة هذه الكتلة. سيكون لديك فقط زر بدون ديناميكيات.

Fl_upld(العرض:300px;) #fl_inp(display:none;) .fl_upld label( cursor:pointer; الخلفية:#36c; border-radius:3px; الحشو:10px 25px; اللون:#fff; وزن الخط:bold; محاذاة النص: المركز؛ .fl_upld التسمية: تحوم (الخلفية: #fc0؛) #fl_nm (الهامش العلوي: 20px؛ اللون: #f00؛)

سأخبرك بسرعة ما هو المسؤول عن ماذا.

• بالنسبة للحاوية fl_upld، اضبط العرض على 300 بكسل. إذا كان هذا الحقل موجودًا داخل النموذج الخاص بك، والذي يحتوي على عرض، فمن حيث المبدأ لا يمكنك كتابة هذا السطر وعدم تعيين العرض.
• #fl_inp(display:none;) - قم بإخفاء حقل مرفق الملف القياسي الخاص بنا. هذه معلمة مهمة والوحيدة.
• بعد ذلك، بالنسبة للتسمية .fl_upld نكتب المعلمات. سيصبح المعرف هو الزر الخاص بنا. أدخل ما تريد لجعل الزر من النوع المطلوب.
• .fl_upld label:hover(background:#fc0;) - أنماط الزر. الكولا قمت بتمرير المؤشر فوقه. بالنسبة لنا يتحول إلى اللون الأصفر فقط.
• وأخيرًا، نضيف أيضًا معلمات لكتلة اسم الملف #fl_nm.

هذه هي كل الأنماط، بالطبع، كما هو الحال دائمًا، يمكنك تغييرها كما تريد وتخصيصها لتناسبك. المعلمة الرئيسية- هذا لإخفاء الحقل القياسي. #fl_inp(العرض:لا شيء;)

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

.files[ 0 ]) file_name = inp[ 0 ].files[ 0 ].name; else file_name = inp.val().replace("C:\\fakepath\\", ""); إذا (! file_name. length) يعود؛ if(lbl.is(":visible"))( lbl.text(file_name); btn.text("Select"); )else btn.text(file_name); )).يتغير()؛
- إذا كان المتصفح يدعم File API، فسيتم تحديد اسم الملف باستخدامه، وإلا فسيتم اقتطاعه من القيمة المدخلات المخفية. ل أجهزة محمولة، عندما يكون العنصر زرًا واحدًا، يتم عرض اسم الملف المحدد عليه.

يبدو أن كل ما هو مطلوب قد كتب بالفعل. وهنا التماثيل! إذا قمت بتحديد ملف باستخدام حقل "الجوال"، ثم قمت بزيادة حجم النافذة ونقل العنصر إلى "سطح المكتب"، فسيظل "الملف غير محدد" في حقل النص - تحتاج إلى تحديث العنصر في كل مرة تقوم فيها بالتغيير حجم النافذة:
$(window).resize(function())( $(".file_upload input").triggerHandler("change"); ));

وماذا حصلنا في النهاية؟ تم اختبار حقل اختيار الملف المنمق الناتج بنجاح لجميع الطرق الثلاثة في المتصفحات التالية:

• فايرفوكس 22.0 (لينكس، ويندوز)
• أوبرا 12.16 (لينكس، ويندوز)
• متصفح الانترنت 9
• كروميوم 27.0 (لينكس)
• أبل سفاري (iOS 6.3.1)
• متصفح أندرويد (أندرويد 2.3.6)
• أندرويد فايرفوكس

من بين مزايا جميع الأساليب التي تمت مناقشتها في المقالة، يمكن تحديد المزايا الرئيسية التالية:

• لم يتم استخدام الفلاش.
• يمكن تصميم العنصر بسهولة باستخدام CSSاستخدام التقنيات الحديثةتصميم التكيف.
• يمكن أيضًا ملء الحقل باستخدام لوحة المفاتيح.

من العيوب الرئيسية:

• ضرورة استخدام جافا سكريبت (ينطبق على جميع الطرق).
• استخدام اختراقات CSS "لإخفاء" الأشياء.
• الحاجة إلى كتابة عكازات إضافية لحقل ذو سمة متعددة (ينطبق على جميع الطرق).
• غير متقاطع - جميع الأساليب تفتقر إلى دعم IE 8، ومن الضروري أيضًا استخدام خصائص CSS "المتصفح" لدعم "الأشياء القديمة" المتبقية.
• حل JavaScript غير مدعوم من قبل الجميع إصدارات الإنترنت Explorer، بالإضافة إلى بعض الإصدارات القديمة من الآخرين المتصفحات الشعبية(على الرغم من أنه لم يعد يستخدمها أحد تقريبًا).

أي من الطريقتين الأنيقتين لإنشاء مدخلات منمقة تختارها للاستخدام اليومي هو أمر متروك لك. خياري هو طريقة استخدام التسمية (على الرغم من أنها تحتوي على تخطيط غير دلالي).

يمكن العثور على أمثلة عملية للطرق الثلاث على CodePen.