Utilisez JS+HTML5 pour obtenir un effet d'aperçu du téléchargement d'image (exemple)-Tutoriel H5-php.cn

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

怪我咯

Libérer： 2017-04-30 10:45:37

original

2655 Les gens l'ont consulté

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>

Copier après la connexion

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!