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:
Wählen Sie die Seite vor dem Bild aus:

這里寫圖片描述

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:

Entfernen Sie HTML-Tags und löschen Sie den HTML-Beispielcode
Verwenden von Front-End-HTML+CSS+JS zum Entwickeln einer einfachen TODOLIST-Funktion (Notizblock)
HTML + CSS + JS realisiert, dass die Leinwand dem Quellcode für Spezialeffekte des kleinen Kreises der Maus folgt
js+html+css zur Realisierung eines manuellen und automatischen Karussells
Zwei Möglichkeiten zur Verwendung von JavaScript in HTML
So lernen Sie verschiedene HTML-Tags

<<: Einführung in die MySQL-Entsperr- und Sperrtabelle

>>: So benennen Sie in Linux mehrere Dateien gleichzeitig um

Detaillierte Erläuterung des Aufbaus und der Verwendung des Docker Private Warehouse

Detaillierte grafische Erklärung zur Installation der MySQL-Datenbank und zur Konfiguration eines Java-Projekts unter Linux

1. MySQL-Datenbank installieren ① Herunterladen, ...

HTML5 und jQuery zum Implementieren von Vorschau-Codebeispielen vor dem Hochladen lokaler Bilder

Detaillierte Erläuterung des Aufbaus und der Verwendung des Docker Private Warehouse

Erläuterung des Arbeitsmechanismus von Namenode und SecondaryNameNode in Hadoop

Wie verstecke ich den Text im A-Tag und zeige das Bild an? Kompatibel mit 360-Grad-Rendering

Implementierung der CSS-Transformation des Seitenumblätter-Animationsdatensatzes

So fügen Sie Nginx zu den Systemdiensten in CentOS7 hinzu

MySQL-Datenbank zum Abrufen der Angaben zu Sekunden, Minuten, Stunden und Tagen vor und nach

Python3.6-MySql Dateipfad einfügen, die Lösung zum Entfernen des Backslashs

So verbinden Sie Django 2.2 mit einer MySQL-Datenbank

Detaillierte Erläuterung des Beispiels zum Exportieren von Daten aus einer angegebenen Tabelle in MySQL

CSS float (float, clear) beliebte Erklärung und Erfahrungsaustausch

Artikel empfehlen

Verwenden von Nginx zum Implementieren der Graustufenversion

So ändern Sie das Root-Passwort in einem Container mit Docker

Implementierung der Codeaufteilung von Webpack3+React16

Eine kurze Diskussion über Browserkompatibilitätsprobleme in JavaScript

Detaillierte Erklärung zum Remotezugriff auf die MySQL-Datenbank über Workbench

Detaillierte Erläuterung der Konfiguration und Einführung des MySQL-Halbsynchron-Replikationsprinzips

Detaillierte Erläuterung des einzeiligen Funktionscodes des Datumstyps in MySQL

Detaillierte grafische Erklärung zur Installation der MySQL-Datenbank und zur Konfiguration eines Java-Projekts unter Linux

Vue verwendet v-model, um den gesamten Prozess der El-Paginierungskomponenten zu kapseln

Konfigurationsmethode für die VMware Kali-Umgebung virtueller Maschinen

Detaillierte Erläuterung der Wissenspunkte zum MySQL Strict Mode

Docker-Verbindung – MongoDB-Implementierungsprozess und Codebeispiele

Erstellen Sie einen hochverfügbaren MySQL-Cluster mit Dual-VIP

Detaillierte Erläuterung der Wiederverwendung und Erweiterung von Vue-Komponenten

Detaillierte JavaScript-Rekursion