Предисловие: Когда мы создаем веб-страницы, нам часто необходимо загружать изображения. Мы можем выбирать изображения или делать фотографии для загрузки. Если мы просто используем <input type=file/> , хотя этот метод также может достичь этой функции, это может повлиять на удобство работы пользователя. Это немного другое, поэтому в этой статье описано использование css+js для реализации функций предварительного просмотра и загрузки сжатого изображения после выбора изображения. Часть информации поступает из Интернета и записывается и систематизируется здесь.
Предварительный просмотр эффекта:
1. Создайте index.html.<!DOCTYPE html><html> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, начальный масштаб=1.0, максимальный масштаб=1.0, масштабируемый пользователем=нет> <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>ID-карта</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 class = btn> отправить</div> </form> </body></html>2.Создайте 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; позиция: относительная;}.container div{text-align: center; 0}.container input { opacity:0; filter:alpha(opacity=0); высота: 100%; позиция: абсолютная; слева: 0;}.container p {размер шрифта: 0.9rem; цвет: #999}.btn {цвет фона: #4363ab; цвет: #fff; выравнивание текста: центр; отступ: 0,5 рем 1 рем; ширина: 80%; граница-радиус: 0,2 рем; размер шрифта: 1,2 рем} 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 //Идентификатор элемента, используемого для отображения изображения при выборе * @param {*} btnel //Идентификатор области кнопки, отображаемой, когда изображение не выбрано */function onFileChange(fileObj,el,btnel) {вар windowURL = window.webkitURL; вар imgObj = document.getElementById(el); document.getElementById(btnel).style.display=none; .display=блок; если (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 = масштаб); imgObj.filters.item(DXImageTransform.Microsoft.AlphaImageLoader).src = dataURL; }}/** * Возвращает данные формата base64 после сжатия изображения* @param {*} image img element* @param {*} ширина после сжатия Ширина изображения* @param {*} height Высота сжатого изображения* @param {*} qua //Качество изображения 1-100 */функция compressImageTobase64(image,width,height,qua){ varquality = qua ?qua / 100: var Canvas = document.createElement(canvas), ctx = Canvas.getContext('2d'); h = image.naturalHeight; холст.ширина = ширина||w; холст.высота = высота||h; ctx.drawImage(image, 0, 0, w, h, 0, 0, width||w, height||h); var data = Canvas.toDataURL(image/jpeg, return data;}//Отправить данные; 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.append(face) ,face_data); formData.append(back,back_data); //необходимо ввести jQuery $.ajax({ url:/address, type: 'POST', кэш: false, данные: formData, timeout:180000,processData: false, contentType: ложь, успех: функция (r) { }, ошибка: функция (r) { } });}Исходный код: адрес Github.
Подвести итогВышеуказанное представляет собой html+css+js, введенный редактором для реализации функции фотографирования, предварительного просмотра и загрузки изображений. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит. ответить вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!