How to implement the upload and display of multiple images and single images in js-JS Tutorial-php.cn

How to implement the upload and display of multiple images and single images in js

王林

Release： 2020-04-10 09:24:59

forward

1899 people have browsed it

How to implement the upload and display of multiple images and single images in js

Foreword:

Projects often use a large number of image uploads. When it was involved before, I often downloaded some materials from the Internet and used them directly, but then As the number of projects increased, it was discovered that a variety of methods were used, leading to great confusion. So I took the time to write a DEMO to sort out the smoothness of image uploading and the points that need to be paid attention to when uploading single images and multiple images.

Multi-picture upload

Multi-picture upload, this is just a front-end display effect. In the actual project, multi-picture upload should upload one picture at a time Then send a request to the background, and the background returns the img path and then displays it.

(Recommended tutorial: js tutorial)

Why must it be passed to the background for display?

1. If you directly display the base64 image path in the foreground, then send a request to the background. If an error occurs in the interface, the user will have the illusion that the image is uploaded successfully, but the background does not receive the image at this time;

2. Every time the file file changes, the previous files file will be given to Cover it. If it is displayed directly without ajax submission, only the last one will be submitted with form submission.

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

Copy after login

Single image upload

Remove the multiple attribute in the input and it becomes a single image upload;

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

Copy after login

Follow the above code Single image upload and multiple image upload can be realized directly. The following is about what you need to pay attention to when placing a single image upload and multiple image upload submissions;

1. Single image upload can be submitted along with the form, and you can submit it in the background by inputting a name value;

2. Multiple image uploads cannot be submitted together with the form, because the file will only retain the latest one after each upload; you can first submit the image successfully through ajax, then loop through the form to create a hidden input and return it to the background. The path is set to change the val value of the input and is finally submitted with the form; it should be noted that the name value of the hidden input is written in the form of [], for example: name="img[]". In this way, the background can receive all images when the form is submitted; the code above

is suitable for display after the front-end clicks file to upload images. Some specific interactions with the backend can be added according to the needs of the actual project!

The above is the detailed content of How to implement the upload and display of multiple images and single images in js. For more information, please follow other related articles on the PHP Chinese website!