تعليق: في الآونة الأخيرة ، كنت أستخدم التحكم في تحميل الملف ووجدت مشكلتين توافقتين من التحكم في تحميل الملف: أحدهما هو أن التحكم في تحميل الملف لا يمكن أن يتغير العرض من خلال CSS تحت Firefox ، والآخر هو أن التحكم في تحميل الملف وتصرفه بشكل مختلف ضمن متصفحات مختلفة. ستوفر هذه المقالة حلًا مفصلاً.
لقد استخدمت مؤخرًا عنصر تحكم تحميل الملف عند استخدام Canvas لمعالجة وحدات البكسل للصور ، ووجدت مشكلتين توافقان مع التحكم في تحميل الملف. أحدهما هو أن التحكم في تحميل الملف لا يمكن أن يتغير العرض من خلال CSS تحت Firefox ، والآخر هو أن التحكم في تحميل الملف يبدو ويتصرف بشكل مختلف في متصفحات مختلفة.فيما يلي لقطة شاشة للتحكم في تحميل الملف في IE10 و Firefox16 و Chrome22 و Opera12 و Safari5.1.7:
في IE10 ، انقر نقرًا مزدوجًا فوق مربع الإدخال أو انقر فوق الزر لإيقاف مربع تحديد الملف. يمكن أن يؤدي النقر فوق مربع الإدخال أو الزر أو النص في المتصفحات الأخرى إلى تشغيل مربع تحديد الملف.
بالنظر إلى هذا الالتباس ، من الضروري توحيد الشيء نفسه والسلوك. هذا هو حل التوافق الخاص بي.
دعونا أولاً نلقي نظرة على لقطات الشاشة للنتيجة النهائية في كل متصفح:
الفكرة الأساسية: قم بإنشاء مربعات الإدخال والأزرار لمحاكاة عناصر تحكم تحميل الملفات. اضبط عنصر تحكم تحميل الملف على شفاف. اجعل التحكم في تحميل الملف يمينًا مع الزر المستخدم للمحاكاة. قم بتعديل ترتيب التراص للعناصر ، بحيث تكون الأزرار أدناه ، والتحكم في تحميل الملف في الوسط ، وصاحب الإدخال أعلاه. بعد اكتمال اختيار الملف ، قم بتعيين القيمة في عنصر تحكم تحميل الملف إلى مربع الإدخال المستخدم للمحاكاة.
المبدأ: في المتصفحات المختلفة ، يكون ارتفاع زر التحكم في تحميل الملف قابل للتعديل ، ويمكن النقر فوق الجانب الأيمن من عنصر تحكم تحميل الملف. لذلك عن طريق ضبط ارتفاع عنصر تحكم تحميل الملف وتعديل موضع تحكم تحميل الملف (محاذاة يمينية) ، يمكن كتابة مساحة النقر القابلة للنقر للتحكم في تحميل الملف بالكامل مع الأزرار المستخدمة للمحاكاة. عندما يكون التحكم في تحميل الملف شفافًا ، ينقر المستخدم على الزر للمحاكاة يؤدي إلى مربع تحديد الملف. ولكن في الوقت نفسه ، لا يمكن أن يسبق ترتيب تكديس عناصر تحكم تحميل الملف بواسطة مربع الإدخال المستخدم للمحاكاة. خلاف ذلك ، عندما يضع المستخدم الماوس على مربع الإدخال ، قد ترى أن المؤشر لا يشير إلى نص ولكن سهم (وعند النقر فوقه كسهم ، سيتم ظهور مربع تحديد الملفات) ، وسيتم الخلط بين المستخدم.
التنفيذ: دعنا نلقي نظرة على الكود في الجزء HTML أولاً.
<viv>
<type type = "text" value = "file غير محدد" /> <إدخال type = "button" value = "browse" /> <input type = "file" />
</div>
ثم هناك رمز لجزء CSS.
#ملف {
الموقف: قريب
العرض: 226 بكسل ؛
الارتفاع: 25 بكسل ؛
الحدود: 1px #99f الصلبة ؛
}
#file input {
حجم الخط: 16 بكسل ؛
الهامش: 0 ؛
الحشو: 0 ؛
الموقف: قريب
المحاذاة الرأسية: الأوسط ؛
الخطوط العريضة: لا شيء ؛
}
#file input [type = "text"] {
الحدود: 3px لا شيء ؛
العرض: 172 بكسل ؛
Z-index: 4 ؛
}
#file input [type = "button"] {
العرض: 54px ؛
الارتفاع: 25 بكسل ؛
Z-index: 2 ؛
}
#file input [type = "file"] {
الموقف: مطلق ؛
اليمين: 0px ؛
الارتفاع: 25 بكسل ؛
العتامة: 0 ؛
Z-index: 3 ؛
}
أخيرًا ، يتم استخدام جزء JavaScript لعرض مسار الملف الذي تم الحصول عليه بواسطة التحكم في تحميل الملف في مربع الإدخال المرئي.
window.onload = function () {
var file = document.queryselector ("#file input [type = 'file']") ؛
var text = document.queryselector ("#file input [type = 'text']") ؛
file.adDeventListener ("تغيير" ، تعيين ، خطأ) ؛
وظيفة التعيين () {
text.value = file.value ؛
}
}
مرحبًا بك في ترك رسالة للتواصل أو التصحيح.