Javascript-Eingabebild-Upload und -Vorschau, FileReader-Vorschaubild
|
FileReader ist eine wichtige API für die Frontend-Dateiverarbeitung, insbesondere für die Bildverarbeitung. Wer das Prinzip der Bildverarbeitung kennenlernen möchte, kommt an ihm nicht vorbei.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<style type="text/css">
.file-ipt{position: absolute;left:0;top: 0;opacity: 0;width: 50px;height: 25px;} //Hier wird das Eingabefeld transparent gemacht und dann absolut auf dem Button positioniert .btn{width: 50px;height: 25px; background-color: skyblue;color: white;margin-right: 80px;border: none;border-radius: 10px;font-size: 8px;}
</Stil>
</Kopf>
<Text>
<button class="btn">Bild</button>
<input type="file" id="file" accept="image/jpg,imgae/jpeg,image/png" class="file-ipt" onchange="insertimg(this);"><br>
<img src="" id="img1" alt="">
<Skriptsprache="Javascript">
Funktion insertimg(img){
var rd=neuer FileReader();
Dateien=img.files[0];
var Dateityp = Dateien.Typ.Slice(6,10);
wenn(Dateityp!='jpg'&&Dateityp!='jpeg'&&Dateityp!='png'){
alert('Es werden nur die Bildformate PNG, JPEG und JPG unterstützt.');
zurückkehren;
}anders{
rd.readAsDataURL(Dateien);
rd.onloadend=Funktion(e){
document.getElementById('img1').src=e.target.result;
document.getElementById('img1').style.width="300px";
document.getElementById('img1').style.height="auto";
};
}
}
</Skript>
</body>
</html>Wissenspunktergänzung: Vorschaueffekt beim Hochladen von JS-Eingabedateien Zunächst können Sie sich über die Datei- und FileReader-APIs informieren. Nachdem Sie eine oder mehrere Dateien ausgewählt haben, können Sie auf ein oder mehrere File-Objekte zugreifen, die die ausgewählten Dateien darstellen. Diese Objekte sind in einem FileList-Objekt enthalten. Alle <input>-Elemente mit dem Typattribut „file“ verfügen über ein Dateiattribut zum Speichern der vom Benutzer ausgewählten Dateien. Files hat eine Längeneigenschaft und eine Item-Methode. Wir können das gewünschte Dateiobjekt über files[index] oder files.item(index) abrufen. Sie können das Änderungsereignis verwenden, um auf das Eingabeabschlussereignis der Eingabedatei zu warten. HTML Quelltext:
<ul Klasse="crgoods_uploadUl Clearfix">
<li><img src="img/produkt1.jpg"></li>
<li><img src="img/produkt1.jpg"></li>
<li class="add"><i>+</i>Bis zu 20 Bilder<input type="file" class="liAdd_flie" onchange="liUploadImg(this)"></li>
</ul>js-Code:
//Funktion zur Vorschau des Uploads von Produktalbumbildern liUploadImg(file){
if (datei.dateien && datei.dateien[0]){
var reader = neuer FileReader();
reader.onload = Funktion(evt){
// imgUpload.src = evt.target.result;
$('.crgoods_uploadUl li.add').before('<li><img src="'+evt.target.result+'"></li>');
}
reader.readAsDataURL(Datei.Dateien[0]);
}anders{
var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="";
datei.auswahl();
var src = document.selection.createRange().text;
imgUpload.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
}
}Darüber hinaus finden Sie die detaillierte API unter https://segmentfault.com/a/1190000006600936 Hier ist ein Beispiel:
Dies ist das Ende dieses Artikels über das Hochladen und Vorhersagbare von JavaScript-Eingabebildern und das FileReader-Vorschaubild. Weitere verwandte Inhalte zum Hochladen und Vorhersagbare von JavaScript-Dateien finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Wie Sie die redundanten Felder der Datenbank sinnvoll nutzen
Artikel empfehlen
Einführung in die allgemeine API-Verwendung von Vue3
Inhaltsverzeichnis Veränderungen im Lebenszyklus ...
Verwenden Sie Docker, um einen Redis-Master-Slave-Replikationscluster zu erstellen
In einem Cluster mit Master-Slave-Replikationsmod...
Verwendung regulärer Ausdrücke in CSS-Selektoren
Ja, CSS hat auch reguläre Ausdrücke (Amen) Zwei l...
Ubuntu 20.04 setzt eine statische IP-Adresse (einschließlich verschiedener Versionen)
Da Ubuntu 20.04 das Netzwerk über Netplan verwalt...
Implementierungscode für die HTML-Tabellenrahmensteuerung
Wenn wir eine Tabelle verwenden, weisen wir ihr i...
Detaillierte Erklärung der referenziellen Integrität in SQL (eins-zu-eins, eins-zu-viele, viele-zu-viele)
1. Referenzielle Integrität Referenzielle Integri...
Zusammenfassung der MySQL-Vollsicherung, Master-Slave-Replikation, kaskadierenden Replikation und Halbsynchronisierung
MySQL-Vollsicherung 1. Aktivieren Sie das Binärpr...
Kompatibilitätsprobleme beim Einfügen von Audiodateien in HTML und beim Abspielen in Browsern
Lassen Sie uns über einige Probleme sprechen, die ...
So verwenden Sie den Linux-Befehl tr
01. Befehlsübersicht Der Befehl tr kann Zeichen a...
Eine einfache Methode zum Implementieren der zeitgesteuerten Protokolllöschung unter Linux
Einführung Linux ist ein System, das automatisch ...
Zusammenfassung praktischer Fähigkeiten, die häufig in Vue-Projekten verwendet werden
Inhaltsverzeichnis Vorwort 1. Verwenden Sie $attr...
Verstehen Sie alle Aspekte von HTTP-Headern mit Bildern und Text
Was sind HTTP-Header HTTP ist eine Abkürzung für ...
Vue implementiert einen vollständigen Prozessdatensatz einer einzelnen Dateikomponente
Inhaltsverzeichnis Vorwort Einzelne Dateikomponen...
Tutorial zur Installation von MySQL mit Docker und zur Implementierung einer Remote-Verbindung
Ziehen Sie das Bild Docker-Pull MySQL Sehen Sie s...
Eine detaillierte Zusammenfassung der Regeln zur Verschachtelung von HTML-Tags, geeignet für Anfänger
Ich habe vor kurzem HTML neu gelernt, was als neue...