Comment implémenter le téléchargement et l'affichage de plusieurs images et d'images uniques dans js-js tutoriel-php.cn

Comment implémenter le téléchargement et l'affichage de plusieurs images et d'images uniques dans js

王林

Libérer： 2020-04-10 09:24:59

avant

1946 Les gens l'ont consulté

Comment implémenter le téléchargement et l'affichage de plusieurs images et d'images uniques dans js

Avant-propos :

Le téléchargement d'images est souvent utilisé en grande quantité dans les projets. Lorsqu'il était impliqué auparavant, je téléchargeais souvent certains documents sur Internet et les utilisais directement, mais au fur et à mesure que le nombre de projets augmentait, on découvrit que diverses méthodes étaient utilisées, conduisant à une grande confusion. J'ai donc pris le temps d'écrire une DÉMO pour régler la fluidité du téléchargement d'images et les points auxquels il faut prêter attention lors du téléchargement d'images uniques et de plusieurs images.

Téléchargement multi-images

Téléchargement multi-images, il s'agit simplement d'un effet d'affichage frontal. Dans les projets réels, le téléchargement multi-images doit télécharger une image à la fois. une heure Ensuite, envoyez une demande à l'arrière-plan, et l'arrière-plan renvoie le chemin img puis l'affiche.

(Tutoriel recommandé : tutoriel js)

Pourquoi doit-il être passé en arrière-plan pour l'affichage ?

1. Si vous affichez directement le chemin de l'image base64 au premier plan, alors envoyez une requête en arrière-plan. Si une erreur se produit dans l'interface, l'utilisateur aura l'illusion que l'image est téléchargée avec succès, mais l'arrière-plan ne reçoit pas l'image à ce moment-là

2. les fichiers seront couverts. S'il est affiché directement sans soumission ajax, seul le dernier sera soumis avec la soumission du formulaire.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>多图上传/单图上传</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  .box{
   width: 1000px;
   height: 120px;
   margin: 0 auto;
   border: 1px solid #ddd;
   margin-top: 20px;
   box-sizing: border-box;
   padding: 10px;
  }
  .upload{
   width: 100px;
   height: 100px;
   float: left;
   position: relative;
   overflow: hidden;
  }
  .upload input{
   position: absolute;
   z-index: 1000;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   opacity: 0;
  }
  .upload a{
   display: block;
   width: 100%;
  }
  .upload img{
   display: block;
   width: 100%;
   height: 100%;
  }
  .imgList{
   float: left;
   overflow: hidden;
  }
  .imgList .item{
   width: 100px;
   height: 100px;
   margin-right: 20px;
   float: left;
   position: relative;
  }
  .imgList .item img{
   display: block;
   width: 100%;
   height: 100%;
  }
  .imgList .item span{
   position: absolute;
   top: 0;right: 0;
   width: 100%;
   background: red;
   color:#fff;
   height: 20px;
   width: 20px;
   text-align: center;
   border-radius: 50%;
   cursor: pointer;
  }
 </style>
</head>
<body>
 <div>
  <!-- 放图片的位置 -->
  <div id="imgList"></div>
  <!-- 上传按钮 -->
  <div>
   <input type="file" name="file" value="" multiple accept="image/*" onchange="uploadImg(this);">
   <a href="javascript:void(0)" rel="external nofollow" ><img src="z_add.png" alt=""></a>
  </div>
 </div>
 <script>
   function uploadImg(obj){   
    var files = obj.files;//获取上传文件后的fileList
    var imgList = [];//声明空数组用来接收上传完成后的图片
    for(var i = 0; i<files.length;i++){
     var imgUrl = window.URL.createObjectURL(files[i]);//将文件转换成base64 URL格式
     imgList.push(imgUrl);//将url压入到数组中 **如果需要图片统一选择完毕后，点击上传按钮统一提交，那么直接拿这imgList给后台传递即可。**
     // 循环创建img容器用来放置url在页面上显示
     var img = document.createElement(&#39;img&#39;)
     img.setAttribute("src", imgList[i]);
     //删除按钮
     var close = document.createElement(&#39;span&#39;)
     close.innerHTML="x"
     close.className=&#39;close&#39;
     close.setAttribute(&#39;onclick&#39;,"imgRemove(this)")
     //创建放置img的盒子
     var item = document.createElement(&#39;div&#39;);
     item.className=&#39;item&#39;;
     item.append(img)
     item.append(close)
     var box = document.getElementById("imgList");
     box.append(item);
     //ajax向后台发送请求
     
    }
   }
   //删除代码
   function imgRemove(obj){
    obj.parentNode.remove()
   }
   
 </script>
</body>
</html>

Copier après la connexion

Téléchargement d'une seule image

Supprimez l'attribut multiple dans l'entrée et cela devient un téléchargement d'image unique

<input type="file" name="file" value="" accept="image/*" onchange="uploadImg(this);">

Copier après la connexion

Suivez ce qui précède ; code Vous pouvez télécharger directement des images uniques et télécharger plusieurs images. Ce qui suit concerne ce à quoi vous devez faire attention lors du téléchargement d'images uniques et du téléchargement de plusieurs images ;

1 Les téléchargements d'images uniques peuvent être soumis avec le formulaire, et vous pouvez les soumettre en arrière-plan en saisissant un. valeur du nom ;

2. Plusieurs téléchargements d'images ne peuvent pas être soumis avec le formulaire, car le fichier ne conservera que la dernière après chaque téléchargement, vous pouvez d'abord soumettre l'image avec succès via ajax, puis en boucle ; dans le formulaire pour créer une entrée masquée et la renvoyer à l'arrière-plan. Le chemin est défini pour modifier la valeur val de l'entrée et est finalement soumis avec le formulaire. Il convient de noter que la valeur du nom de l'entrée masquée est écrite dans le formulaire ; forme de [], par exemple : name="img[]". De cette façon, l'arrière-plan peut recevoir toutes les images lorsque le formulaire est soumis ;

Le code ci-dessus peut être affiché après le fichier de clics front-end pour télécharger des images. Certaines interactions spécifiques avec l'arrière-plan peuvent être ajoutées en fonction des besoins du projet réel !

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!