التغلب على تحديات pootstrap 4 إدخال ملف

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

تخصيص نص العنصر النائب وعرض الزر (Bootstrap 4.1)

لتعديل هذا النص ، ما عليك سوى إضافة CSS أو SASS مخصص كما يلي:

.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}

معالجة قيمة العامل المستمر المخفي

bootstrap 4 alpha 6 (الإجابة الأصلية) تعديل العنصر النائب الأولي ونص الزر:

يتم تخزين العنصر النائب الأولي ونص الزر في العناصر الزائفة CSS. لتخصيصها ، تجاوز القيم الافتراضية باستخدام: lang (en) :: بعد و: lang (en) :: قبل المختارين ، على التوالي. المحتوى: "حدد ملف ..." ؛ } #CustomFile .Custom-File-Control: Lang (EN) :: قبل { المحتوى: "انقر لي" ؛ }

2. استرداد اسم الملف المحدد وتحديث الإدخال:

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

#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}

#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}

. المحتوى: ""! مهم ؛ }

عند اختيار الملف ، قم بتبديل الفئة .selected على custom-file-control باستخدام jQuery لإخفاء العنصر النائب وعرض اسم الملف:

$ ('. var filename = $ (this) .val () ؛ $ (this) .next ('. })

على سبيل المثال:

#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}

#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}

. المحتوى: "نص زر" ؛ }