Tingkatkan kontrol unggah file menggunakan jQuery

Saat menggunakan CSS untuk mempercantik elemen formulir, tidak pernah ada cara yang baik untuk mempercantik kontrol unggahan file. http://www.quirksmode.org/dom/inputfile.html (situs web sepertinya mengalami kesalahan) menyediakan metode untuk mempercantik kontrol pengunggahan file. Terinspirasi oleh metode ini, saya menggabungkan proyek saya sendiri untuk meningkatkan fungsinya. Setelah perbaikan, ia memiliki karakteristik sebagai berikut:

1. Apa yang dilihat pengguna bukanlah tombol unggah file, melainkan sebuah tombol;
2. Format gambar dapat dibatasi;
3. Gambar yang dipilih oleh pengguna dapat ditampilkan di area tertentu (kecuali IE6, safari, dan opera);
4. Kontrol unggah file tetap tersedia saat pengguna menonaktifkan js.

Saya merangkumnya menjadi plug-in jQuery. Karena sudah ada plug-in bernama jQuery.fakeFile di Internet, untuk membedakannya, saya akan menamainya jQuery.liveFakeFile. Artikel ini akan memperkenalkan prinsip dan penggunaan metode ini.

1. Permintaan

Syaratnya sangat sederhana, namun pelaksanaannya memerlukan keterampilan tertentu, yang diuraikan secara singkat sebagai berikut:

1. Diperlukan bahwa kontrol unggah file tidak muncul, tetapi tombol "unggah gambar". Ketika pengguna mengklik tombol tersebut, kotak dialog gambar muncul;
2. Setelah memilih gambar, gambar ditampilkan di atas tombol. Secara default, gambar default ditampilkan;
3. Format gambar yang dipilih dinilai. Setelah tidak memenuhi persyaratan, pesan kesalahan ditampilkan di bawah tombol dan gambar default ditampilkan.

2. Analisis

Sadarilah efek munculnya kotak dialog pemilihan gambar dengan mengklik tombol

Ada kotak input di depan kontrol unggah teks. Terinspirasi oleh Michael McGrady ( ljzcome setelah menerjemahkan artikel ini), kita membuat tombol "unggah gambar", lalu mengubah properti opacity dari kontrol unggah file, atur ke 0, dan gunakan properti positioning untuk menjadikannya Area klik berada di atas tombol. Dengan cara ini, setiap klik yang dilakukan pengguna tampak seperti tombol yang diklik, namun sebenarnya itu adalah kontrol pengunggahan teks itu sendiri.

Menampilkan gambar yang dipilih pengguna

Menampilkan gambar tampak sangat sederhana, namun ada perbedaan antar browser. IE6 tidak dapat menampilkan gambar dengan benar, dan IE7 dapat menampilkannya dengan menggunakan filter AlphaImageLoder. Firefox tidak dapat menampilkan gambar secara normal, tetapi Firefox memiliki metode untuk menampilkan gambar—getAsDataURL(). Browser lain Opera dan Safari tidak dapat menampilkan gambar dengan benar. Oleh karena itu, kami menggunakan teknologi sniffing browser untuk memproses browser yang berbeda secara terpisah, dan hanya mengizinkan browser yang tidak dapat menampilkan gambar secara normal menampilkan teks.

Tentukan format gambar

Anda hanya perlu melewati verifikasi ekspresi reguler ketika peristiwa perubahan kontrol unggah file dipicu. Setelah persyaratan format terpenuhi, gambar atau teks perintah akan ditampilkan, jika tidak, pesan kesalahan akan ditampilkan.

analisis kegunaan

Karena js digunakan untuk mengubah tampilan kontrol unggah file, maka harus dipastikan bahwa pengguna dapat mengunggah gambar secara normal ketika js dinonaktifkan. Jadi apa yang kita tempatkan dalam struktur html harus menjadi kontrol pengunggahan file normal.