Preface: When we make web pages, we often need to upload pictures. We may choose pictures or take photos to upload. If we simply use <input type=file/> , although this method can also achieve the function, the user experience may be poor. It's a bit different, so this article records the use of css+js to implement the preview and compressed upload functions after the image is selected. Some of the information comes from the Internet, and is recorded and organized here.
Effect preview:
1.Create index.html<!DOCTYPE html><html> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no> <title>Take photos and upload</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>ID card</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>ID card front photo</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>Reverse photo of ID card</p> </div> <img style='width: 100%' id='back-result'/> </div> </div> </div> <div class= btn> submit</div> </form> </body></html>2.Create index.css
body{ margin: 0}.content{ padding:0.5rem; display: flex; align-items: center; border-bottom: 1px #999 solid}.label{ width:5rem;}.img-area{ flex:1} .container{ background-color:#e7e7e7; position: relative;}.container div{ text-align: center; padding:0.5rem 0}.container input{ opacity:0; filter:alpha(opacity=0); height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 9;}.container p{ font-size: 0.9rem; color:#999}.btn{ background-color: #4363ab; color: #fff; text-align: center; padding: 0.5rem 1rem; width:80%; border-radius: 0.2rem; margin: 2rem auto; font-weight: 600; font-size: 1.2rem} 3.Create index.js window.onload=function(){ document.getElementById(id-face).addEventListener(change, function(){ onFileChange(this,face-result,face-empty-result) }); document.getElementById(id-back) .addEventListener(change, function(){ onFileChange(this,back-result,back-empty-result) }); document.getElementsByClassName(btn)[0].addEventListener(click, function(){ submit(); });};/** * Processing when the image is selected* @param {*} fileObj input file element* @param {*} el //The ID of the element used to display the image when selected * @param {*} btnel //The ID of the button area displayed when the image is not selected */function onFileChange(fileObj,el,btnel){ var windowURL = window.URL || window.webkitURL; var dataURL; var imgObj = document.getElementById(el); document.getElementById(btnel).style.display=none; imgObj.style .display=block; if (fileObj && fileObj.files && fileObj.files[0]) { dataURL = windowURL.createObjectURL(fileObj.files[0]); imgObj.src=dataURL; } else { dataURL = fileObj.value; imgObj.style.filter = progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=scale); imgObj.filters.item(DXImageTransform.Microsoft.AlphaImageLoader).src = dataURL; }}/** * Return the base64 format data after compressing the image* @param {*} image img element* @param {*} width after compression Picture width* @param {*} height Compressed picture height* @param {*} qua //Picture quality 1-100 */function compressImageTobase64(image,width,height,qua){ var quality = qua ? qua / 100 : 0.8; var canvas = document.createElement(canvas), ctx = canvas.getContext('2d'); var w = image.naturalWidth, h = image.naturalHeight; canvas.width = width||w; canvas.height = height||h; ctx.drawImage(image, 0, 0, w, h, 0, 0, width||w, height||h); var data = canvas.toDataURL(image/jpeg, quality); return data;}//Submit function submit(){ //1. Form submission //document.getElementById(mainForm).submit(); //2. Ajax submission var after compression face_data=compressImageTobase64(document.getElementById(face-result),200,100,90); var back_data=compressImageTobase64(document.getElementById(back-result),200,100,90); var formData = new FormData(); formData.append(face ,face_data); formData.append(back,back_data); //jQuery needs to be introduced $.ajax({ url:/address, type: 'POST', cache: false, data: formData, timeout:180000, processData: false, contentType: false, success:function(r){ }, error:function(r){ } });}Source code: Github address
SummarizeThe above is the html+css+js introduced by the editor to implement the function of taking photos, previewing and uploading pictures. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!