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
Einfache Verwendung von temporären MySQL-Tabellen
Temporäre MySQL-Tabellen sind sehr nützlich, wenn...
Beispieloperation für die Summe des Mysql-Varchar-Typs
Einige Freunde haben beim Erlernen von Datenbanke...
Detaillierte Schritte zur Installation von MySql 5.7.21 unter Linux
Vorwort Die am häufigsten verwendete Datenbank in...
Eine kurze Diskussion über die magischen Verwendungsmöglichkeiten von CSS-Pseudoelementen und Pseudoklassen
CSS spielt auf einer Webseite eine sehr wichtige ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.22
Dieser Artikel dokumentiert die Installation und ...
Detaillierte Erklärung der HTML-Elementhöhe, OffsetHeight, ClientHeight, ScrollTop usw.
Einige Attribute zu Elementen Bei der täglichen E...
Details zu 7 Arten der Komponentenkommunikation in Vue3
Inhaltsverzeichnis 1. Kommunikationsmethode für V...
Detaillierte Erläuterung der Multiversion-Parallelitätskontrolle großer Objekte in MySQL
MySQL 8.0: MVCC für große Objekte in InnoDB In di...
Das Prinzip und die grundlegende Verwendung von Vue.use() in Vue
Inhaltsverzeichnis Vorwort 1. Verstehen mit Beisp...
Lösung für die verstümmelte Anzeige von Linux SecureCRT
Sehen wir uns die Situation an, in der SecureCRT ...
Erstellen Sie eine virtuelle Servermaschine in VMware Workstation Pro (grafisches Tutorial)
Die von mir verwendete VMware Workstation Pro-Ver...
So fügen Sie Links zu FLASH in HTML ein und machen es mit allen gängigen Browsern kompatibel
Schauen Sie sich zuerst den Code an Code kopieren ...
Der URL-Wert des SRC- oder CSS-Hintergrundbildes ist der Base64-codierte Code
Möglicherweise ist Ihnen aufgefallen, dass auf die...
MySQL-Zeitdifferenzfunktionen (TIMESTAMPDIFF, DATEDIFF), Funktionen zur Berechnung von Datumsumrechnungen (date_add, day, date_format, str_to_date)
1. Zeitdifferenzfunktionen (TIMESTAMPDIFF, DATEDI...
Vue3 basierend auf der Skript-Setup-Syntax $refs-Verwendung
Inhaltsverzeichnis 1. Vue2-Syntax 2. Nutzung von ...