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
Detaillierte Erläuterung der benutzerdefinierten Anweisungen für die Vue.js-Direktive
Anpassen eines Demo-Befehls Die Syntax der benutz...
Die umfassendsten 50 Mysql-Datenbankabfrageübungen
Diese Datenbankabfrageanweisung ist eine von 50 D...
Detaillierte Erläuterung der perfekten Integrationslösung zwischen Serv-U FTP und AD
Ich habe mich beim Backend angemeldet, um die Lös...
Einführung in die Verwendung von CSS3-Filterattributen
1. Einleitung Beim Schreiben von Animationseffekt...
Beispielcode zur Implementierung von Follow Ads mit JavaScript
Floating Ads sind eine sehr verbreitete Form der ...
Javascript-Countdown-Eingabeaufforderungsfeld
In diesem Artikelbeispiel wird der spezifische Ja...
Java-Beispielcode zum Generieren von zufälligen Zeichen
Beispielcode: importiere java.util.Random; import...
Erläuterung der Verwendung von GROUP BY in gruppierten Abfragen und der SQL-Ausführungsreihenfolge
In SQL wird GROUP BY verwendet, um Daten in den E...
MySQL partitioniert vorhandene Tabellen in der Datentabelle
Inhaltsverzeichnis So funktioniert es Betriebsabl...
So verwenden Sie Cursor-Trigger in MySQL
Cursor Die von der Auswahlabfrage zurückgegebenen...
So führen Sie eine reibungslose if-Beurteilung in js durch
Inhaltsverzeichnis Vorwort Code-Implementierung I...
Vollständige Schritte zum Klonen von CentOS und zur gemeinsamen Nutzung virtueller Linux-Maschinen
Vorwort Wenn ein Linux vollständig eingerichtet i...
Der Unterschied sowie die Vor- und Nachteile des MySQL-Primärschlüssels UUID und des automatisch inkrementierten Primärschlüssels
Einführung Ich habe eine Zeit lang die PostgreSQL...
Analyse und Lösung der Gründe, warum HTML-externe Referenz-CSS-Dateien nicht effektiv sind
Als Frontend-Neuling habe ich einige Tage am Front...
Beispielcode zum Implementieren der unteren Ausrichtung auf verschiedene Arten mit CSS
Aufgrund der Geschäftsanforderungen des Unternehm...