คำนำ: เมื่อเราสร้างเว็บเพจ เรามักจะต้องอัปโหลดรูปภาพ เราอาจเลือกรูปภาพหรือถ่ายรูปเพื่ออัปโหลด ถ้าเราเพียงแค่ใช้ <input type=file/> แม้ว่าวิธีนี้จะสามารถบรรลุฟังก์ชันได้เช่นกัน แต่ประสบการณ์ผู้ใช้ก็อาจทำได้ มันแตกต่างออกไปเล็กน้อย ดังนั้นบทความนี้จึงบันทึกการใช้ css+js เพื่อใช้ฟังก์ชันแสดงตัวอย่างและอัปโหลดแบบบีบอัดหลังจากเลือกรูปภาพแล้ว
ดูตัวอย่างเอฟเฟกต์:
1.สร้างดัชนี.html<!DOCTYPE html><html> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, default-scale=1.0, maximum-scale=1.0, user-scalable=no> <title>ถ่ายภาพและอัปโหลด</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>บัตรประจำตัวประชาชน</div> <div class=img-area > <div class=container> <input type=file id='id-face' name='face' Accept=image/* /> <div id='face-empty-result'> <img style='width:4rem' src=https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true <p>ภาพถ่ายด้านหน้าบัตรประจำตัวประชาชน</p> </div > <img style='width: 100%' id='face-result'/> </div> <div class=container style='margin-top:0.5rem;'> <input type=file id='id-back' name='back' Accept=image/* /> <div id='back-empty-result'> <img style='width:4rem' src=https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true <p>ภาพถ่ายด้านหลังของบัตรประจำตัวประชาชน</p> </div> <img style='width: 100%' id='back-result'/> </div> </div> </div> <คลาส div = btn> ส่ง</div> </form> </body></html>2.สร้างดัชนี.css
body{ ระยะขอบ: 0}.content{ padding:0.5rem; display: flex; align-items: center; border-bottom: 1px #999 solid}.label{ width:5rem;}.img-area{ flex:1} .container{ พื้นหลังสี:#e7e7e7; ตำแหน่ง: สัมพันธ์;}.container div{ text-align: center; 0}.container อินพุต {ความทึบ: 0; ตัวกรอง: อัลฟา (ความทึบ = 0); ความสูง: 100%; ตำแหน่ง: สัมบูรณ์; p{ ขนาดตัวอักษร: 0.9rem; text-align: center; การขยาย: 0.5rem 1rem; ความกว้าง: 80%; รัศมีเส้นขอบ: 0.2rem; ระยะขอบ: 2rem อัตโนมัติ; 3.สร้างดัชนี js window.onload=function(){ document.getElementById(id-face).addEventListener(change, function(){ onFileChange(this,face-result,face-empty-result) }); document.getElementById(id-back) .addEventListener (เปลี่ยน, ฟังก์ชั่น () { onFileChange (สิ่งนี้, ผลลัพธ์ย้อนกลับ, ผลว่างเปล่าด้านหลัง) }); document.getElementsByClassName(btn)[0].addEventListener(click, function(){ send(); });};/** * กำลังประมวลผลเมื่อเลือกรูปภาพ* @param {*} องค์ประกอบไฟล์อินพุต fileObj * @param {*} el // ID ขององค์ประกอบที่ใช้แสดงรูปภาพเมื่อเลือก * @param {*} btnel // ID ของพื้นที่ปุ่มที่แสดงเมื่อไม่ได้เลือกรูปภาพ */function onFileChange(fileObj,el,btnel){ var windowURL = window.webkitURL; var imgObj = document.getElementById(el); document.getElementById(btnel).style.display=none; .display=block; if (fileObj && fileObj.files && fileObj.files[0]) { dataURL = windowURL.createObjectURL(fileObj.files[0]); imgObj.src=dataURL; } อื่น ๆ { dataURL = fileObj.style.filter = progid:DXImageTransform.Microsoft.AlphaImageLoader (วิธีการปรับขนาด=มาตราส่วน); imgObj.filters.item(DXImageTransform.Microsoft.AlphaImageLoader).src = dataURL; }}/** * ส่งคืนข้อมูลรูปแบบ base64 หลังจากบีบอัดรูปภาพ* @param {*} image img element* @param {*} width หลังการบีบอัด ความกว้างของรูปภาพ* @param {*} ความสูง ความสูงของรูปภาพที่บีบอัด* @param {*} qua // คุณภาพของภาพ 1-100 */function compressImageTobase64(image,width,height,qua){ var quality = qua ? qua / 100 : 0.8; var canvas = document.createElement(แคนวาส), ctx = canvas.getContext('2d'); h = image.naturalHeight; canvas.width = width||w; canvas.height = ความสูง||h; ctx.drawImage(รูปภาพ, 0, 0, w, h, 0, 0, ความกว้าง||w, ความสูง||h); var data = canvas.toDataURL(image/jpeg, return data;}//Submit ฟังก์ชั่นส่ง () //1. การส่งแบบฟอร์ม //document.getElementById(mainForm).submit(); //2 face_data=compressImageTobase64(document.getElementById(ผลลัพธ์ใบหน้า),200,100,90); var back_data=compressImageTobase64(document.getElementById(back-result),200,100,90); var formData = new FormData(); ,face_data); formData.append(back,back_data); //jQuery จำเป็นต้องแนะนำ $.ajax({ url:/address, type: 'POST', cache: false, data: formData, timeout:180000, processData: false, contentType: เท็จ ความสำเร็จ:ฟังก์ชั่น(r){ } ข้อผิดพลาด:ฟังก์ชั่น(r){ } });}ซอร์สโค้ด: ที่อยู่ Github
สรุปข้างต้นคือ html+css+js ที่โปรแกรมแก้ไขแนะนำเพื่อใช้ฟังก์ชันการถ่ายภาพ ดูตัวอย่าง และอัพโหลดรูปภาพ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความไว้ให้ฉัน แล้วโปรแกรมแก้ไขจะตอบคำถามนี้ ตอบคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!