Komentar: Baru -baru ini, saya menggunakan kontrol unggahan file dan menemukan dua masalah kompatibilitas dari kontrol unggahan file: satu adalah bahwa kontrol unggahan file tidak dapat mengubah lebar melalui CSS di bawah Firefox, dan yang lainnya adalah bahwa kontrol unggahan file terlihat dan berperilaku berbeda di bawah browser yang berbeda. Artikel ini akan memberikan solusi terperinci.
Baru -baru ini, saya menggunakan kontrol unggahan file saat menggunakan kanvas untuk memproses piksel gambar, dan menemukan dua masalah kompatibilitas dengan kontrol unggahan file. Salah satunya adalah bahwa kontrol unggahan file tidak dapat mengubah lebar melalui CSS di bawah Firefox, dan yang lainnya adalah bahwa kontrol unggahan file terlihat dan berperilaku berbeda di browser yang berbeda.Di bawah ini adalah tangkapan layar dari kontrol unggahan file di IE10, firefox16, chrome22, opera12, safari5.1.7:
Di IE10, klik dua kali kotak input atau klik tombol untuk memunculkan kotak pemilihan file. Mengklik kotak input, tombol atau teks di browser lain dapat memicu kotak pemilihan file.
Mengingat kebingungan ini, perlu untuk menyatukan hal yang sama dan perilaku. Inilah solusi kompatibilitas saya.
Pertama -tama mari kita lihat tangkapan layar hasil akhir di setiap browser:
Ide Dasar: Buat kotak input dan tombol untuk mensimulasikan kontrol unggahan file. Atur kontrol unggahan file ke transparan. Buat kontrol unggahan file-sejajar dengan tombol yang digunakan untuk simulasi. Ubah urutan susunan elemen, sehingga tombol di bawah, kontrol unggahan file ada di tengah, dan kotak input di atas. Setelah pemilihan file selesai, tetapkan nilai dalam kontrol unggahan file ke kotak input yang digunakan untuk simulasi.
Prinsip: Di browser yang berbeda, ketinggian tombol kontrol unggahan file dapat disesuaikan, dan sisi kanan kontrol unggahan file dapat diklik. Jadi dengan menyesuaikan ketinggian kontrol unggahan file dan menyesuaikan posisi kontrol unggahan file (selaras kanan), area yang dapat diklik dari kontrol unggahan file dapat sepenuhnya ditimpa dengan tombol yang digunakan untuk simulasi. Ketika kontrol unggahan file transparan, pengguna mengklik tombol untuk simulasi memicu kotak pemilihan file. Tetapi pada saat yang sama, urutan susunan kontrol unggahan file tidak dapat didahului oleh kotak input yang digunakan untuk simulasi. Jika tidak, ketika pengguna menempatkan mouse pada kotak input yang terlihat, Anda dapat melihat bahwa kursor tidak menunjukkan teks tetapi panah (dan ketika mengkliknya sebagai panah, kotak pemilihan file akan muncul), dan pengguna akan bingung.
Implementasi: Mari kita lihat kode di bagian HTML terlebih dahulu.
<div>
<input type = "text" value = "file tidak dipilih" /> <input type = "tombol" value = "browse" /> <input type = "file" />
</div>
Lalu ada kode untuk bagian CSS.
#file {
Posisi: kerabat;
Lebar: 226px;
Tinggi: 25px;
Perbatasan: 1px #99f Solid;
}
input #file {
font-size: 16px;
Margin: 0;
Padding: 0;
Posisi: kerabat;
Vertikal-Align: tengah;
Garis Besar: Tidak Ada;
}
#file input [type = "text"] {
Perbatasan: 3px tidak ada;
Lebar: 172px;
z-index: 4;
}
#file input [type = "tombol"] {
Lebar: 54px;
Tinggi: 25px;
z-index: 2;
}
#file input [type = "file"] {
Posisi: Absolute;
Kanan: 0px;
Tinggi: 25px;
Opacity: 0;
z-index: 3;
}
Akhirnya, bagian JavaScript digunakan untuk menampilkan jalur file yang diperoleh dengan kontrol unggahan file ke dalam kotak input yang terlihat.
window.onload = function () {
var file = document.queryselector ("#input file [type = 'file']");
var text = document.queryselector ("#input file [type = 'text']");
file.addeventListener ("ubah", tetapkan, false);
fungsi penetapan () {
text.value = file.value;
}
}
Selamat datang untuk meninggalkan pesan untuk komunikasi atau koreksi.