Upload gambar adalah fungsi biasa, dan pratinjau gambar adalah sub-fungsi yang sangat diperlukan dalam fungsi unggah. Sebelum ini, saya biasa berlangganan acara Onchange dari elemen input [type = file], setelah jalur diubah, gambar diunggah ke server, dan kemudian jalur gambar diperoleh dan nilainya ditetapkan ke elemen IMG. Terlepas dari solusi untuk pengiriman file asinkron, itu adalah untuk membersihkan gambar pratinjau sementara di sisi server, yang telah meningkatkan beban kerja.
Saya tidak sengaja menemukan informasi yang relevan tentang pratinjau gambar front-end murni dari MDN, dan kemudian mengurutkannya dan merekamnya untuk referensi di masa mendatang.
1. Persiapan 1──Sfilereader
Filereader adalah fitur baru HTML5 untuk membaca data gumpalan dan jenis file. Penggunaan spesifiknya adalah sebagai berikut:
(1). Metode konstruksi
var fr = filereader baru ();
(2). Atribut
ReadyState: Type tidak ditandatangani pendek, keadaan saat ini dari instance filereader, (kosong-0, belum ada data yang dimuat; memuat-1, data memuat; dilakukan-2, semua permintaan baca telah selesai), hanya baca.
Hasil: Isi file dibaca, hanya baca.
Kesalahan: Jenisnya adalah domerror, menunjukkan kesalahan yang terjadi saat membaca file, baca saja.
(3). Metode
abort (): Batalkan operasi baca dan atur ReadyState untuk selesai. Ketika tidak ada operasi yang dibaca dilakukan, memanggil metode ini akan melempar pengecualian DOM_FILE_ABORT_ERR.
ReadArArrayBuffer (Blob Blob): Baca Data, Atribut Hasil diatur ke Jenis ArrayBuffer
readastext (Blob Blob [, encoding = 'UTF-8']): Baca data, atribut hasil diatur ke tipe string
ReadasBinaryString (Blob Blob): Baca Data, Atribut Hasil diatur ke data biner asli
ReadasDataurl (Blob Blob): Baca Data, Atribut Hasil diatur ke Formulir Skema URI Data (untuk detail, silakan kunjungi "JS Magic Hall: Pengantar Skema URI Data")
(4). Peristiwa
Onload: dipicu setelah membaca data berhasil
OneError: dipicu saat pengecualian dilemparkan saat membaca data
OnloadStart: dipicu sebelum membaca data
OnloadEnd: dipicu setelah membaca data, dipicu setelah Onload atau Onerror
onabort: dipicu setelah membatalkan bacaan
Onprogress: secara berkala dipicu saat membaca
(5). Dukungan Browser
Ff3.6+, chrome7+, ie10+
2. Persiapan 2─ ─SMAmagetRansform.microsoft.alphaimageloader Filter
(1). Fungsi: Fungsi utamanya adalah untuk memproses gambar secara transparan (IE5.5 ~ 6 tidak mendukung PNG transparan)
(2). Cara menggunakan dalam gaya
#preview {filter: progid: dximagetransform.microsoft.alphaimageloader (sizingMethod = skala, src = "dummy.png");}(3). Cara menggunakan di js
var preview = document.geteLementById ('preview'); preview.style.filter = preview.currentstyle.filter + "; progid: dximagetransform.microsoft.alphaimageloader (sizingMethod = skala, src = 'dummy.png')"; preview.filters.item ("dximagetransform.microsoft.alphaimageloader"). Src = "Dummer1.(4). Atribut
Diaktifkan: Opsional, pengaturan apakah filter diaktifkan. Rentang nilai true (default), false
SizingMethod: Opsional, menetapkan bagaimana gambar tindakan filter ditampilkan dalam batas wadah, tanaman kisaran nilai (potong gambar agar sesuai dengan ukuran wadah), gambar (nilai default, menambah atau mengurangi ukuran wadah agar sesuai dengan ukuran gambar), skala (penskalaan gambar agar sesuai dengan ukuran wadah)
SRC: Diperlukan, gunakan URL absolut atau relatif untuk menunjuk ke gambar latar belakang. Ketika URL adalah alamat lokal dari komputer pengguna, pengecualian yang tidak memungkinkan akses ke sistem file lokal akan dilemparkan ketika SRC elemen IMG adalah alamat lokal komputer pengguna.
Pelaksanaan
Selanjutnya, kami menggunakan readasdataurl dari filereader untuk mendapatkan skema data URI untuk mengimplementasikan fungsi pratinjau gambar, dan kami menggunakan filter dximagetransform.microsoft.alphaimageloader untuk menurunkan peringkat.
Fragmen HTML:
<style type = "text/css">#preview {width: 100px; Tinggi: 100px;} </style> <!-[jika LTE IE 9]> <style type = "text/css"> #preview {filter: progid: dximagetransform.microsoft.alphaimageloader (sizingMethod = skala); } </style> <! [endif]-> <input type = "file" onchange = "showpreview (this);"/> <div id = "preview"> </div>JS Fragment:
var preview = function (el) {var pv = document.geteLementById ("preview"); // IE5.5 ~ 9 Gunakan filter if (pv.filters && typeof (pv.filters.item) === 'function') {pv.filters.item ("dximagetransform.microsoft.alphaimageloader"). Src = el.value; } else {// browser lain dan IE10+ (filter tidak mendukung) Gunakan filereader var fr = new filereader (); fr.onload = function (evt) {var pvimg = gambar baru (); pvimg.style.width = pv.offsetWidth + 'px'; pvimg.style.height = pv.offsetheight + 'px'; pvimg.src = evt.target.Result; pv.removechild (0); PV.AppendChild (PVIMG); }; fr.readasdataurl (el.files [0]); }};4. Pit
Karena IE11 telah membuat pertimbangan keamanan, tidak mungkin untuk mendapatkan alamat nyata dari file yang dipilih pengguna melalui nilai, outerHTML dan getAttribute pada elemen input [type = file], dan hanya dapat memperoleh nama C:/ FakePath/ file. Oleh karena itu, jika IE11 digunakan, tetapi mode teks diatur ke bawah 10, tidak ada cara untuk mencapai pratinjau gambar.
Solusi 1 ─ ─ Taruh kalimat ini di bawah tag kepala: <meta http-equiv = "x-ua-kompatibel" konten = "ie = edge">. Ini akan memberi tahu IE bahwa versi tertinggi dari IE saat ini dapat digunakan untuk menguraikan dan membuat halaman web secara default.
Solusi 2 ─ "Gunakan dokumen. Operasi spesifiknya adalah sebagai berikut:
// Misalkan fileel adalah elemen [type = file] elemen.
5. Suplemen: Gunakan window.url.createObjecturl bukan filereader
Skema URI data yang diperoleh melalui metode ReadAsDataurl dari filereader akan menghasilkan string base64 yang sangat panjang. Jika gambar lebih besar, string akan lebih lama. Jika reflow halaman terjadi, itu akan menyebabkan degradasi kinerja. Solusinya adalah sebagai berikut:
1. Tag IMG yang dipratinjau menggunakan penentuan posisi absolut untuk keluar dari aliran dokumen normal, yang tidak ada hubungannya dengan elemen lain dari dokumen, dan tidak akan mempengaruhi kinerja saat mencerminkan.
2. Gunakan window.url.createObjecturl (Blob Blob) untuk menghasilkan tautan data.
var createObjecTurl = function (blob) {return window [window.webkiturl? 'WebKiturl': 'url'] ['createObjecTurl'] (blob);};CATATAN: Tautan data yang dihasilkan oleh window.url.createObjecTURl adalah memori-eksklusif, jadi jika Anda menggunakannya dari waktu ke waktu, Anda perlu menelepon window.url.revokeObjecturl (domstring objUrl) untuk membebaskan memori. Konten juga akan dirilis secara otomatis saat halaman disegarkan.
var resolveObjecUrl = function (blob) {window [window.webkiturl? 'WebKiturl': 'url'] ['RevokeObjecturl'] (blob);};Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.