js, um die Funktion zum Hochladen von Bildern zu realisieren
|
Das Prinzip des Hochladens von Bildern auf dem Front-End lautet: Verwenden Sie das Eingabe-Tag type = "file", um das Bild abzurufen, verwenden Sie dann das FileReader-Objekt, um eine neue Instanz zu erstellen, lesen Sie das durch das Datei-Tag erhaltene Bild über die Methode readAsDataURL () dieses Objekts, konvertieren Sie es in das Base64-Format und übertragen Sie es nach Abschluss über Ajax oder andere Methoden in den Hintergrund. HTML Sie benötigen ein Eingabe-Tag vom Typ „file“. Wenn Sie eine Vorschau benötigen, können Sie ein img-Tag hinzufügen.
<div Klasse="Warp">
<div class="warp-content">Zum Hochladen klicken</div>
<input type="file" id="file" />
</div>
<img src="" />JS 1. Beim Hochladen von Bildern muss festgestellt werden, ob sich das hochgeladene Bild geändert hat. Daher wählen wir hier das Onchange-Ereignis von js. Holen Sie sich zuerst das Dom-Element der Eingabe, img. Unter dem Demo-Element des Eingabetyps = „Datei“ befindet sich ein Dateiattribut, das die von uns hochgeladenen Dateiinformationen enthält. Drucken Sie es aus und Sie können den Namen, den Typ und andere Informationen der hochgeladenen Datei sehen.
var Datei = document.getElementById('Datei');
var Bild = Dokument.QuerySelector("img");
datei.onchange = funktion() {
var fileData = this.files[0]; //Dies ist die Datei, die wir hochgeladen haben}
2. Verwenden Sie dann das FileReader-Objekt. FileReader wird hauptsächlich zum Lesen von Dateiinhalten in den Speicher verwendet. Über eine Reihe asynchroner Schnittstellen kann im Hauptthread auf lokale Dateien zugegriffen werden. Mithilfe des FileReader-Objekts kann eine Webanwendung den Inhalt einer auf dem Computer des Benutzers gespeicherten Datei (oder eines Rohdatenpuffers) asynchron lesen und mithilfe des File-Objekts oder des Blob-Objekts die zu verarbeitende Datei oder die zu verarbeitenden Daten angeben. Zum Einsatz kommt hierbei die Methode readAsDataURL, welche die Datei im Base64-Format einlesen kann. Anwendung
var reader = neuer FileReader();
reader.readAsDataURL(fileData);//Dateiinhalt asynchron lesen, das Ergebnis wird durch die Zeichenfolge data:url dargestellt/*Wird aufgerufen, wenn der Lesevorgang erfolgreich abgeschlossen wurde*/
reader.onload = Funktion(e) {
console.log(e); //Überprüfen Sie die Objekteigenschaften. Es gibt eine Ergebniseigenschaft. Der Eigenschaftswert ist eine lange Zeichenfolge im Base64-Format. Dies ist das gewünschte Bild. console.log(this.result); //Holen Sie die Daten. Hier zeigt dies auf den Instanzleser des FileReader()-Objekts.
image.setAttribute("src", this.result)//Weisen Sie dem img-Tag einen Wert zu, damit es angezeigt wird}Eigenschaften und Ereignisse des FileReader-Objekts
Offizielle Dokumentation zum FileReader-Objekt 3. Nach Abschluss des zweiten Schritts können wir Bilder hochladen. Wenn Benutzer es erneut verwenden, können wir nicht garantieren, was sie hochladen, Bilder oder Videos. Wir müssen den hochgeladenen Dateityp bestimmen. Unter dem Demo-Element des Eingabetyps „file“ befindet sich ein Dateiattribut, das die Dateitypinformationen enthält. Wir können dieses Attribut verwenden, um den hochgeladenen Dateityp zu bestimmen. (In reader.onload können Sie über this.result das Base64-Format des Bildes abrufen, es einer Variablen zuweisen und an das Backend übergeben, wodurch ein Bild-Upload abgeschlossen wird.)
var Datei = document.getElementById('Datei');
var Bild = Dokument.QuerySelector("img");
datei.onchange = funktion() {
var fileData = this.files[0]; //Holen Sie die erste Datei (File-Objekt) in einem FileList-Objekt, das ist die Datei, die wir hochgeladen haben var pettern = /^image/;
console.info(Dateidatentyp)
wenn (!pettern.test(fileData.type)) {
alert("Das Bildformat ist falsch");
zurückkehren;
}
var reader = neuer FileReader();
reader.readAsDataURL(fileData);//Dateiinhalt asynchron lesen, das Ergebnis wird durch die Zeichenfolge data:url dargestellt/*Wird aufgerufen, wenn der Lesevorgang erfolgreich abgeschlossen wurde*/
reader.onload = Funktion(e) {
console.log(e); //Objekt anzeigen console.log(this.result); //Die gewünschten Daten image.setAttribute("src", this.result)
}
}Vollständiger Code:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<style type="text/css">
.warp {
Anzeige: Inline-Block;
vertikale Ausrichtung: unten;
Position: relativ;
}
.warp-Inhalt {
Rand: 1px durchgehend rot;
Breite: 150px;
Höhe: 150px;
Zeilenhöhe: 150px;
Textausrichtung: zentriert;
}
Eingabe {
Position: absolut;
oben: 0;
links: 0;
Rand: 1px durchgehend rot;
Breite: 150px;
Höhe: 150px;
Deckkraft: 0;
Cursor: Zeiger;
}
img {
Breite: 300px;
Höhe: 300px;
Rand: 1px durchgehend rot;
Rand oben: 50px;
vertikale Ausrichtung: unten;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Dateibox">
<div Klasse="Warp">
<div class="warp-content">Zum Hochladen klicken</div>
<input type="file" id="file" />
</div>
<img src="" />
</div>
<Skripttyp="text/javascript">
var Datei = document.getElementById('Datei');
var Bild = Dokument.QuerySelector("img");
datei.onchange = funktion() {
var fileData = this.files[0]; //Holen Sie die erste Datei (File-Objekt) in einem FileList-Objekt, das ist die Datei, die wir hochgeladen haben var pettern = /^image/;
console.info(Dateidatentyp)
wenn (!pettern.test(fileData.type)) {
alert("Das Bildformat ist falsch");
zurückkehren;
}
var reader = neuer FileReader();
reader.readAsDataURL(fileData);//Dateiinhalt asynchron lesen, das Ergebnis wird durch die Zeichenfolge data:url dargestellt/*Wird aufgerufen, wenn der Lesevorgang erfolgreich abgeschlossen wurde*/
reader.onload = Funktion(e) {
console.log(e); //Objekt anzeigen console.log(this.result); //Die hier gewünschten Daten this verweist auf den Instanzreader des FileReader()-Objekts
image.setAttribute("src", dieses.Ergebnis)
}
}
</Skript>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Einige Verbesserungen in MySQL 8.0.24 Release Note
>>: Wachstumserfahrung eines Webdesigners
Artikel empfehlen
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.15 (Windows)
Da ich MySQL installieren muss, zeichne ich den I...
Eine kurze Diskussion über die Verwendung virtueller Listen zur Optimierung von Tabellen in el-table
Inhaltsverzeichnis Vorwort Lösung Konkrete Umsetz...
CSS implementiert einen Popup-Fenstereffekt mit einer Maskenebene, die geschlossen werden kann
Popup-Fenster werden in der tatsächlichen Entwick...
jQuery implementiert einen einfachen Popup-Fenstereffekt
In diesem Artikel wird der spezifische Code von j...
Detaillierte Erklärung der CSS-Hintergrund- und Rahmen-Tag-Beispiele
1. CSS-Hintergrund-Tag 1. Stellen Sie die Hinterg...
Lösung für „Keine solche Datei oder kein solches Verzeichnis“ im Gebietsschema nach der Installation von glibc-2.14 in CentOS6.5
Inhaltsverzeichnis 1. In die Grube fallen 2. Verg...
Detaillierte Analyse des Flex-Layouts in CSS3
Das Flexbox-Layoutmodul soll eine effizientere Mö...
HTML implementiert ein festes schwebendes, halbtransparentes Suchfeld auf Mobilgeräten
Frage. Im mobilen Shopping-Mall-System sehen wir ...
So implementieren Sie das mobile Anmelde- und Registrierungsmodul elegant in vue3
Inhaltsverzeichnis Vorwort Eingabefeldkomponente ...
MySQL 8.0 kann jetzt JSON verarbeiten
Inhaltsverzeichnis 1. Kurzübersicht 2. JSON-Grund...
JavaScript implementiert Countdown auf Front-End-Webseite
Verwenden Sie natives JavaScript, um den Countdow...
Detaillierte Erklärung zu Unique Constraints und NULL in MySQL
Vorwort Eine Anforderung, die ich zuvor zur Verei...
So stellen Sie Spring Boot mit Docker bereit
Die Entwicklung der Docker-Technologie bietet ein...
Designtheorie: Zehn Tipps zur Inhaltspräsentation
<br /> Der Entwurf einer persönlichen Schrei...
Eine kurze Diskussion über den Spaß von :focus-within in CSS
Ich glaube, einige Leute haben dieses Bild gesehe...