ความคิดเห็น: เมื่อเร็ว ๆ นี้ฉันใช้การควบคุมการอัปโหลดไฟล์และพบปัญหาความเข้ากันได้สองประการของการควบคุมการอัปโหลดไฟล์: หนึ่งคือการควบคุมการอัปโหลดไฟล์ไม่สามารถเปลี่ยนความกว้างผ่าน CSS ภายใต้ Firefox และอื่น ๆ คือการควบคุมการอัปโหลดไฟล์จะดูแตกต่างกันภายใต้เบราว์เซอร์ที่แตกต่างกัน บทความนี้จะให้บริการแก้ปัญหาโดยละเอียด
เมื่อเร็ว ๆ นี้ฉันใช้การควบคุมการอัปโหลดไฟล์เมื่อใช้ Canvas เพื่อประมวลผลพิกเซลรูปภาพและพบปัญหาความเข้ากันได้สองอย่างกับการควบคุมการอัปโหลดไฟล์ หนึ่งคือการควบคุมการอัปโหลดไฟล์ไม่สามารถเปลี่ยนความกว้างผ่าน CSS ภายใต้ Firefox และอีกอันคือการควบคุมการอัปโหลดไฟล์จะดูและทำงานแตกต่างกันในเบราว์เซอร์ที่แตกต่างกันด้านล่างเป็นภาพหน้าจอของการควบคุมการอัปโหลดไฟล์ใน IE10, Firefox16, Chrome22, OperA12, Safari5.1.7:
ใน IE10 ดับเบิลคลิกที่กล่องอินพุตหรือคลิกปุ่มเพื่อปรากฏขึ้นในกล่องเลือกไฟล์ การคลิกที่กล่องอินพุตปุ่มหรือข้อความในเบราว์เซอร์อื่น ๆ สามารถเรียกใช้กล่องเลือกไฟล์
ด้วยความสับสนนี้จำเป็นต้องรวมกันและพฤติกรรมเดียวกัน นี่คือวิธีแก้ปัญหาความเข้ากันได้ของฉัน
ก่อนอื่นให้ดูที่ภาพหน้าจอของผลลัพธ์สุดท้ายในแต่ละเบราว์เซอร์:
แนวคิดพื้นฐาน: สร้างกล่องอินพุตและปุ่มเพื่อจำลองการควบคุมการอัปโหลดไฟล์ ตั้งค่าการควบคุมการอัปโหลดไฟล์เป็นโปร่งใส ทำให้การควบคุมการอัพโหลดไฟล์สอดคล้องกับปุ่มที่ใช้สำหรับการจำลอง ปรับเปลี่ยนลำดับการซ้อนขององค์ประกอบเพื่อให้ปุ่มอยู่ด้านล่างตัวควบคุมการอัปโหลดไฟล์อยู่ตรงกลางและกล่องอินพุตอยู่ด้านบน หลังจากการเลือกไฟล์เสร็จสมบูรณ์ให้กำหนดค่าในการควบคุมการอัปโหลดไฟล์ไปยังกล่องอินพุตที่ใช้สำหรับการจำลอง
หลักการ: ในเบราว์เซอร์ที่แตกต่างกันความสูงของปุ่มของการควบคุมการอัปโหลดไฟล์สามารถปรับได้และด้านขวาของตัวควบคุมการอัปโหลดไฟล์สามารถคลิกได้ ดังนั้นด้วยการปรับความสูงของการควบคุมการอัปโหลดไฟล์และปรับตำแหน่งของการควบคุมการอัปโหลดไฟล์ (จัดตำแหน่งขวา) พื้นที่ที่คลิกได้ของการควบคุมการอัปโหลดไฟล์สามารถเขียนทับได้อย่างสมบูรณ์ด้วยปุ่มที่ใช้สำหรับการจำลอง เมื่อการควบคุมการอัปโหลดไฟล์มีความโปร่งใสผู้ใช้จะคลิกปุ่มสำหรับการจำลองทริกเกอร์กล่องการเลือกไฟล์ แต่ในเวลาเดียวกันลำดับการซ้อนของการควบคุมการอัปโหลดไฟล์ไม่สามารถนำหน้าด้วยกล่องอินพุตที่ใช้สำหรับการจำลอง มิฉะนั้นเมื่อผู้ใช้วางเมาส์ไว้ในกล่องอินพุตคุณอาจเห็นว่าเคอร์เซอร์ไม่ได้ระบุข้อความ แต่เป็นลูกศร (และเมื่อคลิกเป็นลูกศรกล่องเลือกไฟล์จะปรากฏขึ้น) และผู้ใช้จะสับสน
การใช้งาน: มาดูรหัสในส่วน HTML ก่อน
<div>
<อินพุต type = "text" value = "ไฟล์ไม่ได้เลือก" /> <input type = "button" value = "Browse" /> <input type = "file" />
</div>
จากนั้นก็มีรหัสสำหรับส่วน CSS
#ไฟล์ {
ตำแหน่ง: ญาติ;
ความกว้าง: 226px;
ความสูง: 25px;
ชายแดน: 1px #99F แข็ง;
-
#อินพุต file {
ขนาดตัวอักษร: 16px;
มาร์จิ้น: 0;
Padding: 0;
ตำแหน่ง: ญาติ;
แนวตั้ง-แนว: กลาง;
โครงร่าง: ไม่มี;
-
#file input [type = "text"] {
ชายแดน: 3px ไม่มี;
ความกว้าง: 172px;
z-index: 4;
-
#file input [type = "ปุ่ม"] {
ความกว้าง: 54px;
ความสูง: 25px;
z-index: 2;
-
#file input [type = "file"] {
ตำแหน่ง: สัมบูรณ์;
ขวา: 0px;
ความสูง: 25px;
ความทึบ: 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;
-
-
ยินดีต้อนรับสู่การฝากข้อความสำหรับการสื่อสารหรือการแก้ไข