Maison > Article > interface Web > Comment utiliser jQuery dans la scène d'aperçu

Comment utiliser jQuery dans la scène d'aperçu

PHPzoriginal: 2023-04-17 15:00:36491parcourir

Dans le développement Web, la prévisualisation d'images, d'audio ou de vidéos est un besoin très courant. Bien entendu, vous devrez utiliser les nouvelles fonctionnalités de HTML5 ou un plug-in Flash pour accomplir cette tâche. Cependant, vous avez peut-être également rencontré un problème : comment actualiser ou effacer les fichiers multimédias dans la scène d'aperçu ?

Il s'agit d'une fonctionnalité très utile de jQuery que nous devons connaître : effacer/supprimer le contenu de l'aperçu. Apprenons à utiliser jQuery dans la scène d'aperçu.

Implémentation de la fonction de prévisualisation

Tout d'abord, nous avons besoin d'un élément HTML qui peut être prévisualisé, tel que img, audio ou vidéo. Habituellement, nous utilisons l'élément <input type="file"> de HTML5 pour réaliser cette fonction et afficher son contenu dans l'élément d'aperçu après avoir sélectionné le fichier multimédia.

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

Ensuite, utilisez jQuery pour écouter l'événement de sélection de fichier, lire le fichier sélectionné sous forme d'URL et le définir comme attribut src de l'élément d'aperçu.

$('#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);
  }
});

Ici, nous utilisons l'objet FileReader pour lire le contenu du fichier en tant que DataURL. Nous définissons ensuite ce DataURL comme attribut src de l'élément d'aperçu. Cela affichera un aperçu du fichier multimédia.

Implémentation de la fonction d'aperçu clair

Après avoir rendu le contenu de l'aperçu, si l'utilisateur souhaite le remplacer ou le supprimer, nous devons fournir un moyen d'effacer le contenu de l'aperçu. Voyons comment accomplir facilement cette tâche à l'aide de jQuery.

Tout d'abord, nous devons définir l'attribut src de l'élément d'aperçu sur une chaîne vide.

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

Cela supprimera le contenu multimédia de l'élément d'aperçu. Cependant, si l'utilisateur sélectionne un fichier, le chemin du fichier sera toujours affiché dans l'élément d'entrée du fichier. Afin d'effacer complètement la sélection de fichiers d'origine, nous devons utiliser une astuce.

Nous pouvons créer un nouvel élément d'entrée de fichier, le remplacer par l'élément d'entrée d'origine et le définir sur un nouvel élément d'entrée de fichier vide. Cela effacera le chemin du fichier et réinitialisera la sélection du fichier.

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

Ici, nous utilisons la méthode clone() et la méthode replaceWith() de jQuery pour réaliser cette fonction. La méthode clone() créera une copie de l'élément existant et la transmettra à la méthode replaceWith() pour remplacement.

Exemple complet

Vous trouverez ci-dessous un exemple complet qui montre comment utiliser jQuery pour implémenter la fonctionnalité d'aperçu et d'effacement de l'aperçu.

<!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>

Ici, nous avons ajouté un bouton pour effacer le contenu de l'aperçu. Cliquer sur ce bouton appellera la fonction d'effacement de l'aperçu, définira l'attribut src de l'élément d'aperçu sur une chaîne vide et réinitialisera la sélection de fichier.

Conclusion

La fonctionnalité de prévisualisation est une exigence très courante dans le développement de sites Web ou d'applications. En utilisant les astuces de jQuery, nous pouvons facilement implémenter les fonctionnalités d’aperçu et d’aperçu clair. J'espère que ce petit guide vous aidera !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html5 jquery html 字符串对象事件 input

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：De quoi a besoin un stagiaire web front-end ?Article suivant：De quoi a besoin un stagiaire web front-end ?

Articles Liés

Voir plus