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
Dinge, die Sie nicht über die CSS-Pseudoelemente ::before und ::after wissen
CSS hat zwei Pseudoklassen, die nicht häufig verw...
Installieren Sie Memcached und die PHP Memcached-Erweiterung unter CentOS
In Bezug auf das leistungsstarke verteilte Speich...
Detaillierte Erklärung dreier häufig verwendeter Webeffekte in JavaScript
Inhaltsverzeichnis 1 Element Offset-Serie 1.1 Off...
Ein Artikel zeigt Ihnen, wie Sie den Watch-Listener von Vue verwenden
Inhaltsverzeichnis Hörer beobachten Format Richte...
IE6 implementiert min-width
Zunächst einmal wissen wir, dass dieser Effekt ei...
Sortierung und Paginierung von MySQL-Abfragen
Überblick Da wir die Daten normalerweise nicht di...
Detaillierte Erklärung des Vue-Elements plus Mehrsprachenumschaltung
Inhaltsverzeichnis Vorwort Wie wechselt man zwisc...
Implementierung von Diensten im Docker für den Zugriff auf Hostdienste
Inhaltsverzeichnis 1. Szenario 2. Lösung 3. Fazit...
JavaScript-Plugin-Kapselung für Tabellenwechsel
In diesem Artikel wird der Kapselungscode von Jav...
Mehrere Möglichkeiten zur Implementierung eines zweispaltigen Layouts mit fester Breite links und adaptiver Breite rechts mithilfe von CSS
7 Möglichkeiten, mit CSS ein zweispaltiges Layout...
WEB Standard-Webseitenstruktur
Ob es sich nun um das Hintergrundbild oder die Tex...
jQuery implementiert die Anzeige und Ausblendung von Anzeigenanimationen
Wir sehen oft, dass Anzeigen nach ein paar Sekund...
Beispielverwendung des Linux-Komprimierungsdateibefehls „zip“
Das „.zip“-Format wird zum Komprimieren von Datei...
Installieren Sie mysql5.7 unter Ubuntu 18.04
Ubuntu 18.04 installiert MySQL 5.7 zu Ihrer Infor...
Abfrage der Daten des Tages vor dem aktuellen Zeitintervall in MySQL
1. Hintergrund In tatsächlichen Projekten stoßen ...