Vorwort: Wenn wir Webseiten erstellen, müssen wir häufig Bilder zum Hochladen auswählen oder Fotos aufnehmen. Wenn wir einfach <input type=file/> verwenden, kann die Funktion für den Benutzer zwar ebenfalls erreicht werden Es ist etwas anders, daher wird in diesem Artikel die Verwendung von CSS + JS zur Implementierung der Vorschau- und komprimierten Upload-Funktionen nach der Bildauswahl beschrieben. Einige der Informationen stammen aus dem Internet und werden hier aufgezeichnet und organisiert.
Effektvorschau:
1. Erstellen Sie 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>Fotos machen und hochladen</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-Karte</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>Foto von der Vorderseite des Personalausweises</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>Umgekehrtes Foto des Personalausweises</p> </div> <img style='width: 100%' id='back-result'/> </div> </div> </div> <div class = btn> senden</div> </form> </body></html>2. Erstellen Sie 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{ Hintergrundfarbe:#e7e7e7; Position: relative;}.container div{ text-align: center:0.5rem 0}.container input{ opacity:0; height: 100%; width: 0; z-index: 0; p{ Schriftgröße: 0,9rem; Farbe:#999}.btn{ Hintergrundfarbe: #4363ab; text-align: center; Polsterung: 0,5rem 1rem; Randradius: 2rem; Schriftgröße: 1,2rem; 3. Erstellen Sie index.js window.onload=function(){ document.getElementById(id-face).addEventListener(change, function(){ onFileChange(this,face-result,face-empty-result) }); .addEventListener(change, function(){ onFileChange(this,back-result,back-empty-result) }); document.getElementsByClassName(btn)[0].addEventListener(click, function(){ subscribe(); });};/** * Verarbeitung, wenn das Bild ausgewählt wird* @param {*} fileObj-Eingabedateielement * @param {*} el //Die ID des Elements, das zum Anzeigen des Bildes verwendet wird, wenn es ausgewählt ist * @param {*} btnel //Die ID des Schaltflächenbereichs, der angezeigt wird, wenn das Bild nicht ausgewählt ist */function onFileChange(fileObj,el,btnel){ var windowURL = window.URL || var dataURL; var imgObj = document.getElementById(el); document.getElementById(btnel).display=none; .display=block; if (fileObj && fileObj.files && fileObj.files[0]) { dataURL = windowURL.createObjectURL(fileObj.src=dataURL } else { dataURL = fileObj.value; imgObj.style.filter = progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=scale); imgObj.filters.item(DXImageTransform.Microsoft.AlphaImageLoader).src = dataURL; }}/** * Gibt die Daten im Base64-Format nach der Komprimierung des Bildes zurück* @param {*} Bild-img-Element* @param {*} Breite nach der Komprimierung Bildbreite* @param {*} height Komprimierte Bildhöhe* @param {*} qua //Bildqualität 1-100 */Funktion compressImageTobase64(image,width,height,qua){ var quality = qua ? qua / 100 : var canvas = document.createElement(canvas), ctx = canvas.getContext('2d'); h = image.naturalHeight; canvas.width = width||w; ctx.drawImage(image, 0, 0, w, h, 0, 0, width||w, height||h); var data = canvas.toDataURL(image/jpeg, quality);}//Submit function subscribe(){ //1. Formularübermittlung //document.getElementById(mainForm).submit(); //2 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 muss eingeführt werden $.ajax({ url:/address, type: 'POST', cache: false, data: formData, timeout:180000, processData: false, contentType: false, success:function(r){ }, error:function(r){ } });}Quellcode: Github-Adresse
ZusammenfassenDas Obige ist das vom Herausgeber eingeführte HTML + CSS + JS, um die Funktion zum Aufnehmen von Fotos, Anzeigen der Vorschau und Hochladen von Bildern zu implementieren. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht Ich werde Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!