Explication détaillée des étapes pour télécharger et faire écho à plusieurs images à l'aide de balises d'entrée et de jquery-js tutoriel-php.cn

Cette fois, je vais vous donner une explication détaillée des étapes pour utiliser la balise d'entrée et jquery pour implémenter la fonction de téléchargement et d'écho de plusieurs images, et comment utiliser la balise d'entrée et jquery pour implémenter la fonction de téléchargement et d'écho de plusieurs images Quelles sont les précautions Voici des cas réels, jetons un oeil.

Rendu

Faisons une démo comme celle-ci à partir de zéro

Première étape :

Améliorons d'abord notre La balise du fichier d'entrée par défaut est très moche. Embellissons-la. Si vous ne la connaissez pas, vous pouvez simplement mettre une boîte à l'extérieur, définir l'opacité de l'entrée sur 0, puis concevoir la boîte extérieure. dans le style que nous aimons. C'est tout, je l'ai fait avec désinvolture.

Style approximatif

Mettons le code source et ne parlons que de l'effet. Quiconque ne met pas le code source est juste un voyou<.>

Voici le corps

<body>
  <p class="uploadImgBtn" id="uploadImgBtn">
    <input class="uploadImg" type="file" name="file" multiple id="file">
  </p>
</body>

Copier après la connexion

Voici le style CSS

.uploadImgBtn {
    width: 100px;
    height: 100px;
    cursor: pointer;
    position: relative;
    background: url("img/plus.png") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
  }
  .uploadImgBtn .uploadImg {
    position: absolute;
    right: 0;
    top:0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  //这是一个用做回显的盒子的样式
  .pic{
    width: 100px;
    height: 100px;
  }
  .pic img {
    width: 100%;
    height: 100%;
  }

Copier après la connexion

La quantité de code n'est pas grande. Ensuite, nous analyserons comment faire écho à l'image ; Je sais qu'il existe deux façons, l'une consiste à la télécharger d'abord sur le serveur, à renvoyer l'URL de l'image, puis à la restituer sur la page ; l'autre consiste à utiliser l'objet FileReader de h5 pour prévisualiser directement l'image localement, puis téléchargez-le sur le serveur après que l'utilisateur l'ait confirmé.

Nous utilisons le deuxième formulaire. Maintenant que nous connaissons l'idée, commençons la programmation

<script>
  $(document).ready(function(){
    //为外面的盒子绑定一个点击事件
    $("#uploadImgBtn").click(function(){
      /*
      1、先获取input标签
      2、给input标签绑定change事件
      3、把图片回显
       */
//      1、先回去input标签
      var $input = $("#file");
//      2、给input标签绑定change事件
      $input.on("change" , function(){
        //补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
        //获取选择图片的个数
        var files = this.files;
        var length = files.length;
        console.log("选择了"+length+"张图片");
        //3、回显
        for( var i = 0 ; i < length ; i++ ){
          var fr = new FileReader(),
            p = document.createElement("p"),
            img = document.createElement("img");
          p.className = &#39;pic&#39;;
          fr.onload = function(e){
            console.log("回显了图片")
            img.src = this.result;
            p.appendChild(img)
            document.body.appendChild(p);
          }
          fr.readAsDataURL(files[i]);//读取文件
        }
      })
    })
  })
</script>

Copier après la connexion

L'idée du code peut également être considérée comme très simple. Liez d'abord le clic à l'événement de la boîte extérieure, puis récupérez la balise d'entrée, liez l'événement de changement à la balise d'entrée, puis utilisez une boucle for pour faire écho aux données obtenues. Il existe un événement asynchrone en cours de chargement dans la boucle for qui est utilisée. pour rendre l'image. Jetons un coup d'oeil au rendu

Rendu

Nous avons sélectionné trois images, mais une a été affichée En d'autres termes, nous avons créé. trois p et img dans la boucle for, mais un seul a été affiché. J'ai eu une image, il doit y avoir quelque chose de louche dedans.

Analysons-le attentivement. Comme je l'ai déjà dit, il y a un événement asynchrone dans la boucle for en écho, car il est asynchrone, il se peut que l'événement onload soit exécuté après l'exécution de la boucle for pour faire le. l'indice que nous avons défini. La valeur i n'est pas cohérente avec le résultat attendu ; alors, comment pouvons-nous le résoudre ? Si nous pouvons former une

portée de fonction , dans laquelle une image est répercutée à la fois, je pense que nous pouvons résoudre il. Essayons-le. Notre front-end peut utiliser chaque solution de jquery, qui est livrée avec une fonction de rappel , formant une portée de fonction. Jetons un coup d'œil au code

<script>
  $(document).ready(function(){
    //为外面的盒子绑定一个点击事件
    $("#uploadImgBtn").click(function(){
      /*
      1、先获取input标签
      2、给input标签绑定change事件
      3、把图片回显
       */
//      1、先回去input标签
      var $input = $("#file");
//      2、给input标签绑定change事件
      $input.on("change" , function(){
        //补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
        //获取选择图片的个数
        var files = this.files;
        var length = files.length;
        console.log("选择了"+length+"张图片");
        //3、回显
        $.each(files,function(key,value){
          //每次都只会遍历一个图片数据
          var p = document.createElement("p"),
            img = document.createElement("img");
          p.className = "pic";
          var fr = new FileReader();
          fr.onload = function(){
            img.src=this.result;
            p.appendChild(img);
            document.body.appendChild(p);
          }
          fr.readAsDataURL(value);
        })
      })
    })
  })
</script>

Copier après la connexion

puis jetons un œil à l'effet de course

Rendu

Cette fois, répond à nos attentes Effet. Est-ce la fin ? Ce n'est certainement pas le cas. Lorsque nous cliquons à nouveau sur le bouton de téléchargement d'image, le dernier résultat sera définitivement écrasé. Donc, lorsque nous gérons notre entreprise, ce n'est certainement pas ce que nous voulons voir. Alors, que faisons-nous ? Pour résoudre ce problème, nous devons utiliser plusieurs balises d'entrée. Alors, comment pouvons-nous nous assurer que lorsque nous cliquons, ce sera la balise d'entrée nouvellement ajoutée. Ma solution est la suivante, nous mettons l'identifiant de la dernière balise d'entrée, effaçons l'attribut et ajoutons cet attribut ? à notre balise d'entrée nouvellement générée Parce que nous lions l'événement via l'identifiant, nous pouvons lier l'événement à notre balise d'entrée nouvellement générée, et la balise d'entrée d'origine a disparu sans être sélectionnée, regardons le code

<script>
  $(document).ready(function(){
    //为外面的盒子绑定一个点击事件
    $("#uploadImgBtn").click(function(){
      /*
      1、先获取input标签
      2、给input标签绑定change事件
      3、把图片回显
       */
//      1、先回去input标签
      var $input = $("#file");
      console.log($input)
//      2、给input标签绑定change事件
      $input.on("change" , function(){
        console.log(this)
        //补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
        //获取选择图片的个数
        var files = this.files;
        var length = files.length;
        console.log("选择了"+length+"张图片");
        //3、回显
        $.each(files,function(key,value){
          //每次都只会遍历一个图片数据
          var p = document.createElement("p"),
            img = document.createElement("img");
          p.className = "pic";
          var fr = new FileReader();
          fr.onload = function(){
            img.src=this.result;
            p.appendChild(img);
            document.body.appendChild(p);
          }
          fr.readAsDataURL(value);
        })
      })
      //4、我们把当前input标签的id属性remove
      $input.removeAttr("id");
      //我们做个标记，再class中再添加一个类名就叫test
      var newInput = '<input class="uploadImg test" type="file" name="file" multiple id="file">';
      $(this).append($(newInput));
    })
  })
</script>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des choses plus excitantes, veuillez faire attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

Comment utiliser Vue pour créer Amap et créer une application de bus en temps réel

Comment utiliser seajs dans l'accord d'écriture requis

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!