Maison > Article > interface Web > Implémentation HTML5 du code d'effet d'aperçu de l'image téléchargée

Implémentation HTML5 du code d'effet d'aperçu de l'image téléchargée

零下一度original: 2017-04-22 10:04:542674parcourir

Cet article présente principalement JS+HTML5 pour obtenir l'effet de prévisualisation des images téléchargées. Il analyse les étapes de fonctionnement spécifiques et les techniques de mise en œuvre associées de l'aperçu local des images téléchargées en javascript sous la forme d'un exemple complet auquel les amis dans le besoin peuvent se référer. it

Cet article décrit l'exemple de JS+HTML5 pour obtenir l'effet de prévisualisation des images téléchargées. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Dans le projet, j'ai rencontré un téléchargement de fichier avec le type de fichier de balise d'entrée et je voulais prévisualiser l'image avant de télécharger une solution précédente ; télécharger d'abord le fichier, puis afficher l'adresse de retour sur la page n'est pas une bonne chose, car les informations de base de l'utilisateur peuvent ne pas être enregistrées, mais l'avatar a été modifié. S'il doit être modifié, cela entraînera des images redondantes. enregistré sur le serveur.

J'ai trouvé une solution en ligne, comme suit :

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <title>html5 图片上传预览</title>
  <style>
    #preview {
      width: 300px;
      height: 300px;
      overflow: hidden;
    }
    #preview img {
      width: 100%;
      height: 100%;
    }
  </style>
  <script src="jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
    function preview1(file) {
      var img = new Image(), url = img.src = URL.createObjectURL(file)
      var $img = $(img)
      img.onload = function() {
        URL.revokeObjectURL(url)
        $(&#39;#preview&#39;).empty().append($img)
      }
    }
    function preview2(file) {
      var reader = new FileReader()
      reader.onload = function(e) {
        var $img = $(&#39;<img>&#39;).attr("src", e.target.result)
        $(&#39;#preview&#39;).empty().append($img)
      }
      reader.readAsDataURL(file)
    }
     
    $(function() {
      $(&#39;[type=file]&#39;).change(function(e) {
        var file = e.target.files[0]
        preview1(file)
      })
    })
  </script>
</head>
<body>
<form enctype="multipart/form-data" action="" method="post">
  <input type="file" name="imageUpload"/>
  <p id="preview" style="width: 300px;height:300px;border:1px solid gray;"></p>
</form>
</body>
</html>

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!

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：Partagez plusieurs effets d'image sympas implémentés en HTML5Article suivant：Partagez plusieurs effets d'image sympas implémentés en HTML5

Articles Liés

Voir plus