Kata Pengantar: Saat kita membuat halaman web, kita sering kali perlu mengunggah gambar. Kita dapat memilih gambar atau mengambil foto untuk diunggah. Jika kita hanya menggunakan <input type=file/> , meskipun metode ini juga dapat mencapai fungsinya, pengalaman pengguna mungkin buruk. Ini sedikit berbeda, jadi artikel ini mencatat penggunaan css+js untuk mengimplementasikan fungsi pratinjau dan unggahan terkompresi setelah gambar dipilih.
Pratinjau efek:
1.Buat indeks.html<!DOCTYPE html><html> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0, maksimum-scale=1.0, user-scalable=no> <title>Ambil foto dan unggah</title> <link rel=stylesheet href=index.css/> <script type='text/javascript' src='index.js' charset='utf-8'></script> </head> <body> <form id=mainForm> <div class=content> <div class=label>Kartu identitas</div> <div class=img-area > <div class=container> <tipe masukan=file id='id-wajah' nama='wajah' terima=gambar/* /> <div id='hasil-wajah-kosong'> <img style='width:4rem' src=https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true <p>foto depan KTP</p> </div > <img style='lebar: 100%' id='hasil wajah'/> </div> <div class=container style='margin-top:0.5rem;'> <tipe input=file id='id-back' name='back' terima=gambar/* /> <div id='back-empty-result'> <img style='width:4rem' src=https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true <p>Foto belakang KTP</p> </div> <img style='width: 100%' id='back-result'/> </div> </div> </div> <kelas div = btn> kirim</div> </form> </body></html>2.Buat indeks.css
body{ margin: 0}.content{ padding:0.5rem; tampilan: flex; align-items: center; border-bottom: 1px #999 solid}.label{ width:5rem;}.img-area{ flex:1} .container{ warna latar:#e7e7e7; posisi: relatif;}.container div{ perataan teks: tengah; 0}.input wadah{ opacity:0; filter:alpha(opacity=0); tinggi: 100%; lebar: 100%; posisi: atas: 0; p{ ukuran font: 0,9rem; warna:#999}.btn{ warna latar: #4363ab; warna: #fff; perataan teks: tengah; bantalan: 0,5rem 1rem; lebar:80%; radius batas: 0,2rem; margin: 2rem otomatis; berat font: 600; 3.Buat indeks.js window.onload=function(){ document.getElementById(id-face).addEventListener(perubahan, function(){ onFileChange(ini,hasil wajah,hasil-wajah-kosong) }); .addEventListener(perubahan, fungsi(){ onFileChange(ini,hasil kembali,hasil-kosong kembali) }); document.getElementsByClassName(btn)[0].addEventListener(klik, function(){ submit(); });};/** * Memproses saat gambar dipilih* @param {*} fileObj memasukkan elemen file * @param {*} el //ID elemen yang digunakan untuk menampilkan gambar saat dipilih * @param {*} btnel //ID area tombol yang ditampilkan saat gambar tidak dipilih */fungsi onFileChange(fileObj,el,btnel){ var windowURL = window.URL ||. window.webkitURL; var imgObj = document.getElementById(el); .display=blok; jika (fileObj && fileObj.file && fileObj.files[0]) { dataURL = windowURL.createObjectURL(fileObj.files[0]); imgObj.src=dataURL; } else { dataURL = fileObj.value; (Metode ukuran=skala); imgObj.filters.item(DXImageTransform.Microsoft.AlphaImageLoader).src = dataURL; }}/** * Mengembalikan data format base64 setelah mengompresi gambar* @param {*} elemen img gambar* @param {*} lebar setelah kompresi Lebar gambar* @param {*} tinggi Tinggi gambar terkompresi* @param {*} qua //Kualitas gambar 1-100 */fungsi kompresImageTobase64(gambar,lebar,tinggi,kua){ var kualitas = kua ? kua / 100 : 0,8; var kanvas = dokumen.createElement(kanvas), ctx = kanvas.getContext('2d'); h = gambar.naturalHeight; kanvas.lebar = lebar||w; kanvas.tinggi = tinggi||h; ctx.drawImage(gambar, 0, 0, w, h, 0, 0, lebar||w, tinggi||h); var data = canvas.toDataURL(gambar/jpeg, data pengembalian;}//Kirim function submit(){ //1. Pengiriman formulir //document.getElementById(mainForm).submit(); face_data=compressImageTobase64(document.getElementById(hasil-wajah),200,100,90); var back_data=compressImageTobase64(document.getElementById(hasil-kembali),200,100,90); var formData = new FormData(); ,data_wajah); formData.append(back,back_data); //jQuery perlu dimasukkan $.ajax({ url:/address, ketik: 'POST', cache: false, data: formData, timeout:180000, processData: false, contentType: salah, sukses:fungsi(r){ }, kesalahan:fungsi(r){ } });}Kode sumber: Alamat Github
MeringkaskanDi atas adalah html+css+js yang diperkenalkan oleh editor untuk mengimplementasikan fungsi mengambil foto, melihat pratinjau dan mengunggah gambar. Saya harap ini dapat membantu Anda membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!