recherche

Maison >interface Web >Tutoriel H5 >Utilisez JS+HTML5 pour obtenir un effet d'aperçu du téléchargement d'image (exemple)

Utilisez JS+HTML5 pour obtenir un effet d'aperçu du téléchargement d'image (exemple)

怪我咯
怪我咯original
2017-04-30 10:45:372661parcourir

Cet article présente principalement JS+HTML5 pour réaliser 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：Explication détaillée de HTML5 pour implémenter la fonction de prise et de téléchargement de photos sur WeChatArticle suivant：Explication détaillée de HTML5 pour implémenter la fonction de prise et de téléchargement de photos sur WeChat

Articles Liés

Voir plus