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:

js zur Realisierung der Bild-Upload- und Vorschaufunktion
js, um Bilder hochzuladen und normal anzuzeigen
js-Methode zur Realisierung der Vorschau hochgeladener Bilder
js, um einen sofortigen Anzeigeeffekt beim Hochladen von Bildern zu erzielen

<<: Wie Sie die redundanten Felder der Datenbank sinnvoll nutzen

>>: Tutorial zum Ändern der IP-Adresse einer virtuellen Linux-Maschine, Überprüfen des Gateways und Konfigurieren der Netzwerkumgebung

Prozessanalyse von reservierten Wortanweisungen in Dockerfile

Artikel

So installieren Sie MySQL 8.0 in Docker

Artikel

Verwenden Sie .Htaccess, um böswillige IP-Angriffe auf Websites zu verhindern, den Zugriff auf bestimmte Domänennamen zu untersagen, Maschinencrawler zu untersagen und Hotlinking zu untersagen

Artikel

Detailliertes Beispiel für die Verwendung der Case-Anweisung in einer gespeicherten MySQL-Prozedur

Javascript-Eingabebild-Upload und -Vorschau, FileReader-Vorschaubild

Prozessanalyse von reservierten Wortanweisungen in Dockerfile

So installieren Sie MySQL 8.0 in Docker

Verwenden Sie .Htaccess, um böswillige IP-Angriffe auf Websites zu verhindern, den Zugriff auf bestimmte Domänennamen zu untersagen, Maschinencrawler zu untersagen und Hotlinking zu untersagen

Detailliertes Beispiel für die Verwendung der Case-Anweisung in einer gespeicherten MySQL-Prozedur

Einfache Schritte zum Erstellen eines MySQL-Containers mit Docker

Was sind die Verwendungszwecke von Limits in MySQL (empfohlen)

Hexadezimale Farbcodes (vollständig)

Berechnete Eigenschaften und Listenerdetails

Häufig verwendete HTML-Meta-Enzyklopädie (empfohlen)

JavaScript implementiert das Klassenlotterie-Applet

Artikel empfehlen

Nginx implementiert dynamische und statische Trennung Beispielerklärung

Analyse der geplanten Aufgaben und Ereignisplanungsbeispiele von MySQL

Detaillierte Erklärung der Sperrstruktur in MySQL

Navicat für MySQL-Tutorial

Vue.js implementiert ein einfaches Faltpanel

Detaillierte Erläuterung der MySQL-Partitionsfunktion und Beispielanalyse

Zusammenfassung der Anwendungsbereiche von Kubernetes

So veröffentlichen Sie statische Ressourcen in Nginx

Erstellen Sie eine Bildschirmaufzeichnungsfunktion mit JS

Zusammenfassung mehrerer Situationen, in denen MySQL-Indizes fehlschlagen

Unterscheidung zwischen Linux-Hardlinks und Softlinks

Analyse der Verwendung von „replace“ und „regexp“ zum Ersetzen regulärer Ausdrücke in MySQL

Detaillierte Erläuterung der am häufigsten verwendeten Image-Befehle und Container-Befehle von Docker

Grundlegende Verwendung von benutzerdefinierten Anweisungen in Vue

Detaillierte Erläuterung der Multiversion-Parallelitätskontrolle großer Objekte in MySQL