ما هي أفضل طريقة استبدال الملف زر استعراض في html ؟

Question

أنا أعرف أنه من الممكن استبدال الزر "استعراض" ، والتي يتم إنشاؤها في html ، عند استخدام input الوسم مع type="file.

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

Answer 1

فإن أفضل طريقة هي أن تجعل ملف الإدخال التحكم تقريبا غير مرئية (بإعطائه شفافية منخفضة جدا - لا تفعل "الرؤية:خفية"أو "عرض:لا شيء") و بالتأكيد وضع شيء تحت ذلك - مع انخفاض z-index.

هذه الطريقة ، السيطرة الفعلية لن تكون مرئية, و مهما كنت وضعت في إطار ذلك سوف تظهر من خلال.ولكن منذ التحكم في وضعه فوق هذا الزر ، فإنه سوف لا تزال التقاط فوق الأحداث (وهذا هو السبب كنت ترغب في استخدام التعتيم, عدم وضوح الرؤية أو عرض المتصفحات جعل عنصر unclickable إذا كنت تستخدم تلك لإخفاء ذلك).

هذه المادة يذهب في العمق على هذه التقنية.

Answer 2

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

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

<input type="file" id="fileInput">
<img src="...">

#fileInput{
    position: absolute;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}

Answer 3

إذا كنت لا تمانع في استخدام جافا سكريبت يمكنك تعيين opasity من ملف الإدخال إلى 0 ، ضع نصب سيطرة على أعلى عبر z-index وإرسال clickevents من الزر الخاص بك إلى ملف الإدخال.انظر هنا للحصول على هذه التقنية: http://www.quirksmode.org/dom/inputfile.html

Answer 4

هذا ليس ممكنا من الناحية التقنية لأغراض أمنية, وبالتالي فإن المستخدم لا يمكن أن يكون للتضليل.

ومع ذلك ، هناك بعض الحلول - نلقي نظرة على http://www.quirksmode.org/dom/inputfile.html على سبيل المثال واحد.

للعلم هذا السؤال تم بالفعل طلب هنا (حيث أعطى نفس الجواب).

Answer 5

يمكنك استخدام فلاش رافع مثل SWFupload للقيام بذلك أيضا.