html+css+js zur Realisierung der Funktion der Fotovorschau und des Bildhochladens
|
Vorwort: Wenn wir Webseiten erstellen, müssen wir häufig Bilder hochladen. Dabei kann es sich um die Auswahl von Bildern oder die Aufnahme von Fotos zum Hochladen handeln. Obwohl die Funktion auch durch die einfache Verwendung von Effektvorschau:
1. Erstellen Sie index.html
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0, Maximalmaßstab=1.0, Benutzerskalierung=nein">
<title>Foto-Upload</title>
<link rel="stylesheet" href="index.css"/>
<Skripttyp='text/javascript' src='index.js' charset='utf-8'></Skript>
</Kopf>
<Text>
<Formular-ID="Hauptformular">
<div Klasse="Inhalt">
<div class="label">Personalausweis</div>
<div Klasse="Bildbereich">
<div Klasse="Container">
<input type="file" id='id-face' name='face' accept="image/*" />
<div id='Gesicht-leer-Ergebnis'>
<img style='width:4rem' src="https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt="">
<p>Vorderseite des Personalausweises</p>
</div>
<img style='Breite: 100 %' id='Gesichtsergebnis'/>
</div>
<div Klasse = "Container" Stil = "Margin-Top: 0,5rem;">
<input type="file" id='id-back' name='back' accept="image/*" />
<div id='zurück-leeres-Ergebnis'>
<img style='width:4rem' src="https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt="">
<p>Foto der Rückseite Ihres Personalausweises</p>
</div>
<img style='Breite: 100 %' id='Zurück-Ergebnis'/>
</div>
</div>
</div>
<div Klasse="btn">
Senden</div>
</form>
</body>
</html>2. Erstellen Sie index.css
Körper{
Marge: 0
}
.Inhalt{
Polsterung: 0,5rem;
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Rahmen unten: 1px #999 durchgezogen
}
.Etikett{
Breite: 5rem;
}
.img-Bereich{
Flexibilität: 1
}
.Container{
Hintergrundfarbe: #e7e7e7;
Position: relativ;
}
.container div{
Textausrichtung: zentriert;
Polsterung: 0,5rem 0
}
.container-Eingabe{
Deckkraft: 0;
Filter: Alpha (Deckkraft = 0);
Höhe: 100%;
Breite: 100 %;
Position: absolut;
oben: 0;
links: 0;
Z-Index: 9;
}
.container p{
Schriftgröße: 0,9rem;
Farbe:#999
}
.btn{
Hintergrundfarbe: #4363ab;
Farbe: #fff;
Textausrichtung: zentriert;
Polsterung: 0,5rem 1rem;
Breite: 80 %;
Randradius: 0,2rem;
Rand: 2rem automatisch;
Schriftstärke: 600;
Schriftgröße: 1,2rem
}3. Erstellen Sie index.js
fenster.onload = funktion(){
document.getElementById("id-face").addEventListener("ändern", function(){
beiDateiänderung(dies,"Gesichtsergebnis","Gesichtsergebnis leer")
});
document.getElementById("id-back").addEventListener("ändern", function(){
beiDateiänderung(dies,"Zurück-Ergebnis","Zurück-Leer-Ergebnis")
});
document.getElementsByClassName("btn")[0].addEventListener("klicken", function(){
einreichen();
});
};
/**
* Verarbeitung, wenn ein Bild ausgewählt wird* @param {*} fileObj Eingabedateielement* @param {*} el //Die Element-ID, die zum Anzeigen des Bildes nach der Auswahl verwendet wird
* @param {*} btnel //Button-Bereichs-ID, die angezeigt wird, wenn das Bild nicht ausgewählt ist
*/
Funktion beiDateiänderung(fileObj,el,btnel){
var windowURL = window.URL || window.webkitURL;
var DatenURL;
var imgObj = document.getElementById(el);
document.getElementById(btnel).style.display="keine";
imgObj.style.display="Block";
wenn (fileObj && fileObj.files && fileObj.files[0]) {
DatenURL = FensterURL.ObjektURL erstellen(fileObj.files[0]);
imgObj.src=DatenURL;
} anders {
Daten-URL = Dateiobjekt.Wert;
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
}
}
/**
* Komprimiere das Bild und gib die Daten im Base64-Format zurück* @param {*} image img-Element* @param {*} width Breite des komprimierten Bildes* @param {*} height Höhe des komprimierten Bildes* @param {*} qua //Bildqualität 1-100
*/
Funktion compressImageTobase64(Bild,Breite,Höhe,Qua){
var Qualität = qua? qua / 100: 0,8;
var Leinwand = Dokument.createElement("Leinwand"),
ctx = canvas.getContext('2d');
var w = Bild.natürlicheBreite,
h = Bild.natürlicheHöhe;
canvas.width = Breite||b;
canvas.height = Höhe||h;
ctx.drawImage(Bild, 0, 0, b, h, 0, 0, Breite||b, Höhe||h);
var data = canvas.toDataURL("bild/jpeg", Qualität);
Daten zurückgeben;
}
//Funktion übermitteln submit(){
//1. Formularübermittlung//document.getElementById("mainForm").submit();
//2. Ajax-Übermittlung nach der Komprimierung var face_data=compressImageTobase64(document.getElementById("face-result"),200,100,90);
var back_data=compressImageTobase64(document.getElementById("back-result"),200,100,90);
var formData = neue FormData();
formData.append("Gesicht",Gesichtsdaten);
formData.append("zurück",back_data);
//Müssen jQuery einführen
$.ajax({
url:"/Adresse",
Typ: 'POST',
Cache: falsch,
Daten: Formulardaten,
Zeitüberschreitung: 180000,
Prozessdaten: false,
Inhaltstyp: false,
Erfolg:Funktion(r){
},
Fehler:Funktion(r){
}
});
}Quellcode: Github-Adresse Zusammenfassen Oben sind die HTML+CSS+JS, die ich Ihnen vorgestellt habe, um die Fotovorschau und die Bild-Upload-Funktion zu realisieren. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Lösen Sie das Problem der Angabe der UDP-Portnummer im Docker
>>: Detaillierte Analyse mehrerer Situationen, in denen MySQL-Indizes fehlschlagen
Artikel empfehlen
Tipps zum Implementieren mehrerer Rahmen in CSS
1. Mehrere Grenzen[1] Hintergrund: Box-Shadow, Um...
Allgemeine Datentypen in MySQL 5.7
——Anmerkungen aus „MySQL in einfachen Worten (zwe...
Detaillierte Erklärung der Beziehung zwischen React und Redux
Inhaltsverzeichnis 1. Die Beziehung zwischen Redu...
Lösung für das Problem, dass MySQL Daten sehr langsam löscht und einfügt
Wenn ein Unternehmensentwickler eine Insert-Anwei...
Zusammenfassung der langsamen MySQL-Abfragevorgänge
Erklärung langsamer MySQL-Abfragen Das MySQL Slow...
MySQL-Lernen (VII): Detaillierte Erläuterung des Implementierungsprinzips des Innodb Storage Engine-Index
Überblick In einer Datenbank wird ein Index verwe...
Der Iframe-Frame setzt den weißen Hintergrund im IE-Browser auf transparent
In letzter Zeit muss ich im Projektverlauf häufig ...
React implementiert das Hinzufügen, Löschen, Ändern und Abfragen von Todolists
Inhaltsverzeichnis Nehmen Sie Todolist als Beispi...
Lösung für das Problem der automatischen Wiederherstellung nach der Änderung von server.xml und content.xml in Tomcat
Schreiben Sie Konfigurationsdateien in server.xml...
Über Tomcat kombiniert mit Atomikos zur Implementierung von JTA
Vor Kurzem hat das Projekt die Umgebung gewechsel...
Lösung für das Problem des MySQL-Threads beim Öffnen von Tabellen
Problembeschreibung Vor kurzem gab es einen MySQL...
Informationen zum Vue-Komponentenwechsel, dynamischen Komponenten und Komponenten-Caching
Inhaltsverzeichnis 1. Komponentenwechselmethode M...
Der Excel-Export schlägt in der Docker-Umgebung immer fehl
Der Excel-Export schlägt in der Docker-Umgebung i...
Ein Problem mit der Bereitstellung von MySQL 5.5
MySQL-Bereitstellung Derzeit stellt das Unternehm...
MySQL sollte niemals Update-Anweisungen wie diese schreiben
Inhaltsverzeichnis Vorwort Ursache Phänomen warum...