Web-Frontend
js-Tutorial
Detaillierte Erläuterung des Eingabetyps = Datei zur Auswahl von Bildern und zur Erzielung von Vorschaueffekten
Detaillierte Erläuterung des Eingabetyps = Datei zur Auswahl von Bildern und zur Erzielung von Vorschaueffekten
Dieser Artikel enthält hauptsächlich ein Beispiel für die Auswahl von Bildern mit Eingabetyp=Datei und das Erzielen von Vorschaueffekten. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Geben Sie über das Tag den Dateityp an, der das Hochladen von Dateien ermöglichen kann.
Akzeptieren: Sie können den Upload-Typ auswählen, z. B.: nur Bilder hochladen, und es gibt keine Einschränkungen. Das Bildformat ist image/*;
multiple: gibt an, ob mehrere Dateien ausgewählt werden können;
gibt an, dass nur Bilder hochgeladen werden können und mehrere Dateien ausgewählt werden können
<input type="file" accept="image/*" multiple="multiple"/>
Natürlich kann ein direkter Eingabetyp=Datei nur hochgeladene Dateien/Ressourcen auswählen. Wenn wir nach der Auswahl des Bildes den Vorschaueffekt auf der aktuellen Seite erzielen müssen, können wir dies wie folgt erreichen
HTML-Code
<body> <p id="box"> <img id="imgshow" src="" alt=""/> </p> <p id="pox"> <input id="filed" type="file" accept="image/*"/> </p> </body>
CSS-Stildatei
<style>
#box{
width: 300px;
height: 300px;
border: 2px solid #858585;
}
#imgshow{
width: 100%;
height: 100%;
}
#pox{
width: 70px;
height: 24px;
overflow: hidden;
}
</style>JS-Code
<script>
//在input file内容改变的时候触发事件
$('#filed').change(function(){
//获取input file的files文件数组;
//$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
//这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
var file = $('#filed').get(0).files[0];
//创建用来读取此文件的对象
var reader = new FileReader();
//使用该对象读取file文件
reader.readAsDataURL(file);
//读取文件成功后执行的方法函数
reader.onload=function(e){
//读取成功后返回的一个参数e，整个的一个进度事件
console.log(e);
//选择所要显示图片的img，要赋值给img的src就是e中target下result里面
//的base64编码格式的地址
$('#imgshow').get(0).src = e.target.result;
}
})
</script>* jQuery wird im obigen JS-Code verwendet, also jQuery-Datei
Verwandte Empfehlungen:Beispiel-Tutorial zur Dateisteuerung zum Auswählen von Bildern
HTML5 Plus-Beispielcode für Implementieren Sie die Funktion zum Aufnehmen von Bildern oder Auswählen von Bildern im Album zum Hochladen auf die mobile APP
Nach der Eingabe des ausgewählten Bildes wird es nicht rechtzeitig hochgeladen und angezeigt
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Eingabetyps = Datei zur Auswahl von Bildern und zur Erzielung von Vorschaueffekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Hongmeng native Anwendung zufälliger Poesie
Feb 19, 2024 pm 01:36 PM
Um mehr über Open Source zu erfahren, besuchen Sie bitte: 51CTO Hongmeng Developer Community https://ost.51cto.com Laufumgebung DAYU200:4.0.10.16SDK: 4.0.10.15IDE: 4.0.600 1. Um eine Anwendung zu erstellen, klicken Sie auf Datei- >newFile->CreateProgect. Vorlage auswählen: [OpenHarmony] EmptyAbility: Geben Sie den Projektnamen, shici, den Namen des Anwendungspakets com.nut.shici und den Speicherort der Anwendung XXX ein (kein Chinesisch, Sonderzeichen oder Leerzeichen). CompileSDK10, Modell: Stage. Gerät
Verwenden Sie die Funktion File.length() von Java, um die Größe der Datei zu ermitteln
Jul 24, 2023 am 08:36 AM
Verwenden Sie die File.length()-Funktion von Java, um die Größe einer Datei zu ermitteln. Die Dateigröße ist eine sehr häufige Anforderung beim Umgang mit Dateioperationen. Java bietet eine sehr praktische Möglichkeit, die Größe einer Datei zu ermitteln, d. h. mithilfe der Länge(. )-Methode der File-Klasse. In diesem Artikel wird erläutert, wie Sie mit dieser Methode die Größe einer Datei ermitteln und entsprechende Codebeispiele angeben. Zuerst müssen wir ein File-Objekt erstellen, um die Datei darzustellen, deren Größe wir ermitteln möchten. So erstellen Sie ein File-Objekt: Filef
So konvertieren Sie einen PHP-Blob in eine Datei
Mar 16, 2023 am 10:47 AM
So konvertieren Sie einen PHP-Blob in eine Datei: 1. Erstellen Sie eine PHP-Beispieldatei; 2. Über „function blobToFile(blob) {return new File([blob], 'screenshot.png', { type: 'image/jpeg' }) } ”-Methode kann zum Konvertieren von Blob in eine Datei verwendet werden.
Benennen Sie Dateien mit der Java-Funktion File.renameTo() um
Jul 25, 2023 pm 03:45 PM
Verwenden Sie die Funktion File.renameTo() von Java, um Dateien umzubenennen. In der Java-Programmierung müssen wir häufig Dateien umbenennen. Java stellt die File-Klasse für die Verarbeitung von Dateioperationen bereit, und die Funktion renameTo() kann Dateien problemlos umbenennen. In diesem Artikel wird die Verwendung der Java-Funktion File.renameTo() zum Umbenennen von Dateien vorgestellt und entsprechende Codebeispiele bereitgestellt. Die Funktion File.renameTo() ist eine Methode der File-Klasse.
Beheben Sie den Ubuntu-Fehler beim Mounten der mobilen Festplatte: unbekannter Dateisystemtyp exfat
Jan 05, 2024 pm 01:18 PM
Beim Mounten einer mobilen Festplatte durch Ubuntu tritt ein Fehler auf: mount: unlimitedfilesystemtype'exfat'. Die Verarbeitungsmethode lautet wie folgt: Ubuntu13.10 oder exfat-fuse installieren: sudoapt-getinstallexfat-fuseUbuntu13.04 oder niedriger sudoapt-add-repositoryppa:relan /exfatsudoapt-getupdatesudoapt-getinstallfuse- exfatCentOS Linux Fehler beim Mounten des USB-Datenträgers im Exfat-Format zum Laden von extfa in CentOS
Wozu dient das Type-Schlüsselwort in Go?
Sep 06, 2023 am 09:58 AM
Die Verwendung des Type-Schlüsselworts in Go umfasst das Definieren neuer Typaliase oder das Erstellen neuer Strukturtypen. Detaillierte Einführung: 1. Verwenden Sie das Schlüsselwort „type“, um einen neuen Typ zu erstellen, sondern nur einen neuen Namen für den vorhandenen Typ bereitzustellen Die Lesbarkeit des Codes macht den Code klarer. 2. Verwenden Sie das Schlüsselwort „type“, um einen neuen Strukturtyp zu erstellen, der zum Definieren benutzerdefinierter Typen mit mehreren Feldern verwendet werden kann.
So kapseln Sie Eingabekomponenten und einheitliche Formulardaten in vue3
May 12, 2023 pm 03:58 PM
Vorbereitung Verwenden Sie vuecreateexample, um ein Projekt zu erstellen. Die Parameter lauten ungefähr wie folgt: Verwenden Sie native Eingaben, bei denen es sich hauptsächlich um Werte und Änderungen handelt. App.tsx lautet wie folgt: import{ref}from'vue';exportdefault{setup(){//username is the data constusername=ref('Zhang San');//Wenn sich das Eingabefeld ändert, synchronisieren Sie die Daten constonInput =;return( )=>({
Verwenden Sie die Funktion File.getParent() von Java, um den übergeordneten Pfad der Datei abzurufen
Jul 24, 2023 pm 01:40 PM
Verwenden Sie die Funktion File.getParent() von Java, um den übergeordneten Pfad einer Datei abzurufen. In der Java-Programmierung müssen wir häufig Dateien und Ordner bearbeiten. Manchmal müssen wir den übergeordneten Pfad einer Datei ermitteln, also den Pfad des Ordners, in dem sich die Datei befindet. Die File-Klasse von Java bietet die Methode getParent(), um den übergeordneten Pfad einer Datei oder eines Ordners abzurufen. Die File-Klasse ist Javas abstrakte Darstellung von Dateien und Ordnern. Sie bietet eine Reihe von Methoden zum Bearbeiten von Dateien und Ordnern. Unter ihnen, bekommen
