머리말: 웹 페이지를 만들 때 사진을 업로드해야 하는 경우 <input type=file/> 많습니다. 업로드할 사진을 선택하거나 촬영할 수도 있습니다. 이 방법을 사용하면 해당 기능을 구현할 수도 있지만 사용자 경험이 저하될 수 있습니다. 조금 다르기 때문에 이 기사에서는 이미지를 선택한 후 CSS+JS를 사용하여 미리보기 및 압축 업로드 기능을 구현하는 방법을 기록합니다. 일부 정보는 인터넷에서 가져온 것이므로 여기에 기록하고 정리합니다.
효과 미리보기:
1.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>사진 촬영 및 업로드</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 스타일='너비: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.index.css 생성
body{ 여백: 0}.content{ 패딩:0.5rem; 디스플레이: flex; align-items: center; border-bottom: 1px #999 solid}.label{ width:5rem;}.img-area{ flex:1} .container{ 배경색:#e7e7e7; 위치: 상대;}.container div{ 텍스트 정렬: 중앙; 0}.container 입력{ 불투명도: 알파(불투명도=0); 높이: 100%; 상단: 0;}.container p{ 글꼴 크기: 0.9rem; 색상:#999}.btn{ 배경 색상: #4363ab; 색상: #fff; 패딩: 0.5rem 1rem; 테두리 반경: 0.2rem; 글꼴 두께: 600; 3.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(); });};/** * 이미지 선택 시 처리* @param {*} fileObj 입력 파일 요소 * @param {*} el //선택 시 이미지를 표시하는 데 사용되는 요소의 ID * @param {*} btnel //이미지를 선택하지 않을 때 표시되는 버튼 영역의 ID */function onFileChange(fileObj,el,btnel){ var windowURL = window.URL || window.webkitURL; var imgObj = document.getElementById(el); document.getElementById(btnel).imgObj.style; .display=block; if (fileObj && fileObj.files && fileObj.files[0]) { dataURL = windowURL.createObjectURL(fileObj.files[0]); imgObj.src=dataURL } else { dataURL = fileObj.value.filter = progid:DXImageTransform.Microsoft.AlphaImageLoader (크기 조정 방법=규모); imgObj.filters.item(DXImageTransform.Microsoft.AlphaImageLoader).src = dataURL; }}/** * 이미지 압축 후 base64 형식 데이터 반환* @param {*} image img element* @param {*} 압축 후 너비 그림 너비* @param {*} height 압축된 그림 높이* @param {*} qua //사진 품질 1-100 */function compressImageTobase64(image,width,height,qua){ var quality = qua ? qua / 100 : 0.8; var canvas = document.createElement(canvas), ctx = canvas.getContext('2d'); h = 이미지.자연 높이; 캔버스.폭 = 너비||w; 캔버스.높이 = 높이||h; ctx.drawImage(image, 0, 0, w, h, 0, 0, width||w, height||h); var data = canvas.toDataURL(image/jpeg, quality);}//제출 function submit(){ //1. 폼 제출 //document.getElementById(mainForm).submit() //2. 압축 후 Ajax 제출 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(back,back_data); //jQuery를 도입해야 합니다. $.ajax({ url:/address, type: 'POST', 캐시: false, data: formData, timeout:180000, processData: false, contentType: false, 성공:함수(r){ }, 오류:함수(r){ } });}소스코드: Github 주소
요약위 내용은 사진 촬영, 미리보기, 업로드 기능을 구현하기 위해 편집자가 소개한 html+css+js 입니다. 궁금한 사항이 있으시면 메시지를 남겨주시면 편집자가 도와드리겠습니다. 시간 내에 답장을 보내주세요. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!