HTML5 und jQuery zum Implementieren von Vorschau-Codebeispielen vor dem Hochladen lokaler Bilder
|
HTML5 und jQuery implementieren die Vorschau lokaler Bilder vor dem Hochladen. Der Effekt ist ungefähr wie folgt:
Vorschaueffekt nach Bildauswahl:
Unten ist der Code (nur der einfachste Implementierungscode, der CSS-Stil wird nicht kopiert, Sie können ihn verwenden, wie Sie möchten).
<!DOCTYPE html>
<html>
<Kopf>
<title>HTML5 hochgeladene Bildvorschau</title>
<meta http-equiv="Inhaltstyp" content="text/html; charset=UTF-8">
<script src="https://www.jb51.net/ajaxjs/jquery-1.6.2.min.js"></script>
</Kopf>
<Text>
...
<Formularname="form0" ID="form0" >
<!-- Hier ist besonders multiple="multiple" zu erwähnen. Nachdem Sie dies hinzugefügt haben, können Sie mehrere Dateien gleichzeitig zum Hochladen auswählen. Dies ist ein neues Attribut von HTML5-->
<input type="file" name="file0" id="file0" multiple="mehrere" /><br><img src="" id="img0" >
</form>
...
<Skript>
$("#file0").ändern(Funktion(){
// getObjectURL ist eine benutzerdefinierte Funktion, siehe unten // this.files[0] stellt die erste ausgewählte Dateiressource dar, da oben multiple="multiple" steht, was bedeutet, dass möglicherweise mehr als eine hochgeladene Datei vorhanden ist //, aber hier nur die erste gelesen wird var objUrl = getObjectURL(this.files[0]);
// Dieser Code hat keine Wirkung, Sie können ihn löschen // console.log("objUrl = "+objUrl);
wenn (objUrl) {
// Ändern Sie hier das Adressattribut des Bildes $("#img0").attr("src", objUrl);
}
}) ;
//Erstellen Sie eine URL, die auf die Datei zugreifen kann
Funktion getObjectURL(Datei) {
var url = null;
// Die folgenden Funktionen haben den gleichen Effekt, außer dass für verschiedene Browser unterschiedliche JS-Funktionen ausgeführt werden müssen if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(Datei);
} sonst wenn (window.URL!=undefiniert) { // mozilla(firefox)
url = Fenster.URL.createObjectURL(Datei);
} sonst wenn (window.webkitURL!=undefined) { // WebKit oder Chrome
url = window.webkitURL.createObjectURL(Datei);
}
URL zurückgeben;
}
</Skript>
</body>
</html> Dies ist das Ende dieses Artikels über den Beispielcode zur Verwendung von HTML5 und jQuery zur Vorschau lokaler Bilder vor dem Hochladen. Weitere Informationen zur Verwendung von HTML5 und jQuery zur Vorschau lokaler Bilder vor dem Hochladen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Einführung in die MySQL-Entsperr- und Sperrtabelle
>>: So benennen Sie in Linux mehrere Dateien gleichzeitig um
Artikel empfehlen
Gojs implementiert Ameisenlinien-Animationseffekt
Inhaltsverzeichnis 1. Gojs-Implementierung 1. Zei...
Teilen Sie 101 MySQL-Debugging- und Optimierungstipps
MySQL ist eine leistungsstarke Open-Source-Datenb...
JavaScript Snake-Implementierungscode
In diesem Artikelbeispiel wird der spezifische Ja...
Druid-Verbindungspool mit niedriger Version + MySQL-Treiber 8.0 führt zu Thread-Blockierungen und Leistungseinschränkungen
Inhaltsverzeichnis Phänomen Ursachenanalyse Aufru...
Element Plus implementiert Affix
Inhaltsverzeichnis 1. Komponenteneinführung 2. Qu...
Confluence mit Docker bereitstellen
1. Umweltanforderungen 1. Docker 17 und höher wur...
Implementierung eines einfachen Timers in JavaScript
In diesem Artikelbeispiel wird der spezifische Ja...
Der Grund, warum MySQL den B+-Baum als zugrunde liegende Datenstruktur verwendet
Wir alle wissen, dass die zugrunde liegende Daten...
Detaillierte Erläuterung der Destrukturierungszuweisung von JS ES6-Variablen
Inhaltsverzeichnis 1. Was ist Dekonstruktion? 2. ...
Die neueste Version der MySQL5.7.19-Dekomprimierungsversion Installationshandbuch
MySQL-Version: MySQL Community Edition (GPL) ----...
Probleme und Lösungen beim Bereitstellen eines Projekts beim Upgrade der Mysql-Datenbank von Version 5.6.28 auf Version 8.0.11
Die Probleme und Lösungen, die beim Bereitstellen...
DIV-Hintergrund, halbtransparenter Text, nicht durchscheinender Stil
Der DIV-Hintergrund ist halbtransparent, aber die ...
Zusammenfassung der Ausführungsprobleme zwischen MySQL Max und Where
Ausführungsproblem zwischen MySQL Max und Where S...
Schritte zum Verpacken und Konfigurieren von SVG-Komponenten in Vue-Projekten
Ich bin erst vor Kurzem in eine neue Firma einges...
Detaillierte Erklärung des Linux-Netstat-Befehls
Inhaltsverzeichnis Linux-Netstat-Befehl 1. Detail...