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

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

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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