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
Detaillierte Erläuterung der CentOS-Konfiguration der offiziellen Nginx-Yum-Quelle
Ich habe das von Alibaba Cloud gekaufte CentOS fü...
Zusammenfassung einiger praktischer kleiner Zaubertricks in der Vue-Praxis
Wie können Sie das Lamaging von Routen vergessen,...
Tutorial zur Installation und Konfiguration von Hbase unter Linux
Inhaltsverzeichnis Hbase-Installation und -Konfig...
Implementierung des Element-UI-Layouts (Zeilen- und Spaltenkomponenten)
Inhaltsverzeichnis Grundlegende Anweisungen und V...
CSS3-Übergang zum Erreichen des unterstrichenen Beispielcodes
In diesem Artikel wird der Beispielcode für den C...
Beispiel für die Mosaikierung eines Bildes mit js
Dieser Artikel stellt hauptsächlich ein Beispiel ...
Html Select verwendet das ausgewählte Attribut, um die Standardauswahl festzulegen
Wenn Sie einer Option das Attribut selected = &quo...
Eine sehr detaillierte Erklärung des Linux DHCP-Dienstes
Inhaltsverzeichnis 1. DHCP-Dienst (Dynamic Host C...
MySQL-Implementierung des Funktionsbeispiels „lastInfdexOf“
Manchmal muss MySQL eine Funktion ähnlich zu last...
Erste Schritte mit SELinux
Bereits zu Kernel 2.6-Zeiten wurde ein neues Sich...
Eine kurze Analyse der MySQL-Kardinalitätsstatistiken
1. Was ist die Kardinalität? Mit Kardinalität wir...
Tutorial zur Installation von MySQL 8.0.18 unter Windows (Community Edition)
In diesem Artikel wird kurz die Installation von ...
Bootstrap 3.0 Studiennotizen CSS-bezogene Ergänzung
Die wesentlichen Inhalte dieses Artikels sind wie...
Tutorial zum Erstellen des File-Sharing-Dienstes Samba unter CentOS6.5
Samba-Dienste: Dieser Inhalt dient als Referenz f...
Detaillierte Erklärung der Funktionsklassifizierung und Beispiele für diese Zeigerfunktion in Javascript
Drei Möglichkeiten zum Definieren von Funktionen ...