suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >So verwenden Sie jQuery in der Vorschauszene

So verwenden Sie jQuery in der Vorschauszene

PHPz
PHPzOriginal
2023-04-17 15:00:36564Durchsuche

Bei der Webentwicklung ist die Vorschau von Bildern, Audio oder Videos ein sehr häufiges Bedürfnis. Um diese Aufgabe zu erfüllen, müssen Sie natürlich die neuen Funktionen von HTML5 oder ein Flash-Plug-in verwenden. Möglicherweise sind Sie jedoch auch auf ein Problem gestoßen: Wie können die Mediendateien in der Vorschauszene aktualisiert oder gelöscht werden?

Dies ist eine sehr nützliche Funktion von jQuery, über die wir Bescheid wissen müssen: Vorschauinhalte löschen/entfernen. Lassen Sie uns lernen, wie Sie jQuery in der Vorschauszene verwenden.

Vorschaufunktionsimplementierung

Zuerst benötigen wir ein HTML-Element, das in der Vorschau angezeigt werden kann, z. B. img, audio oder video. Normalerweise verwenden wir das <input type="file">-Element von HTML5, um diese Funktion zu erreichen und seinen Inhalt nach Auswahl der Mediendatei im Vorschauelement anzuzeigen. 

<input type="file" id="mediaFile">
<img id="preview">

Als nächstes verwenden Sie jQuery, um das Dateiauswahlereignis abzuhören, die ausgewählte Datei als URL zu lesen und sie als src-Attribut des Vorschauelements festzulegen. 

$('#mediaFile').change(function() {
  var file = this.files[0];
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(e) {
    $('#preview').attr('src', e.target.result);
  }
});

Hier verwenden wir das FileReader-Objekt, um den Dateiinhalt als DataURL zu lesen. Anschließend legen wir diese DataURL als src-Attribut des Vorschauelements fest. Dadurch wird eine Vorschau der Mediendatei angezeigt.

Implementierung der Funktion „Vorschau löschen“

Wenn der Benutzer den Vorschauinhalt nach dem Rendern ersetzen oder löschen möchte, müssen wir eine Möglichkeit bereitstellen, den Vorschauinhalt zu löschen. Schauen wir uns an, wie Sie diese Aufgabe mit jQuery einfach erledigen können.

Zuerst müssen wir das src-Attribut des Vorschauelements auf eine leere Zeichenfolge setzen. 

$('#preview').attr('src', '');

Dadurch wird der Medieninhalt aus dem Vorschauelement entfernt. Wenn der Benutzer jedoch eine Datei auswählt, wird der Dateipfad weiterhin im Dateieingabeelement angezeigt. Um die ursprüngliche Dateiauswahl vollständig zu löschen, müssen wir einen Trick anwenden.

Wir können ein neues Dateieingabeelement erstellen, es durch das ursprüngliche Eingabeelement ersetzen und es auf ein neues, leeres Dateieingabeelement festlegen. Dadurch wird der Dateipfad gelöscht und die Dateiauswahl zurückgesetzt. 

$('#mediaFile').replaceWith($('#mediaFile').clone(true));

Hier verwenden wir die clone()-Methode und die replaceWith()-Methode von jQuery, um diese Funktion zu erreichen. Die Methode clone() erstellt eine Kopie des vorhandenen Elements und übergibt sie zum Ersetzen an die Methode replaceWith().

Vollständiges Beispiel

Unten finden Sie ein vollständiges Beispiel, das zeigt, wie Sie jQuery verwenden, um die Vorschau zu implementieren und die Vorschaufunktion zu löschen. 

<!DOCTYPE html>
<html>
<head>
  <title>jQuery清除预览示例</title>
</head>
<body>
  <input type="file" id="mediaFile">
  <img id="preview">
  
  <button id="clearPreview">清除预览</button>
  
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script>
    $('#mediaFile').change(function() {
      var file = this.files[0];
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function(e) {
        $('#preview').attr('src', e.target.result);
      }
    });
    
    $('#clearPreview').click(function() {
      $('#preview').attr('src', '');
      $('#mediaFile').replaceWith($('#mediaFile').clone(true));
    });
  </script>
</body>
</html>

Hier haben wir eine Schaltfläche zum Löschen des Vorschauinhalts hinzugefügt. Wenn Sie auf diese Schaltfläche klicken, wird die Funktion zum Löschen der Vorschau aufgerufen, das src-Attribut des Vorschauelements auf eine leere Zeichenfolge gesetzt und die Dateiauswahl zurückgesetzt.

Fazit

Die Vorschaufunktion ist eine sehr häufige Anforderung bei der Website- oder Anwendungsentwicklung. Mit jQuery-Tricks können wir die Vorschau- und Clear-Preview-Funktionalität einfach implementieren. Ich hoffe, diese kurze Anleitung hilft!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie jQuery in der Vorschauszene. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 jquery html 字符串 对象 事件 input
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was braucht ein Web-Frontend-Praktikant?Nächster Artikel：Was braucht ein Web-Frontend-Praktikant?

In Verbindung stehende Artikel

Mehr sehen