JS implementation of multi graph and single graph upload display

Time:2021-5-13

Projects often use a lot of pictures to upload. When it comes to the past, we often download some materials from the Internet and use them directly. However, with the increase of projects, we find that there are all kinds of pictures, which leads to great confusion. So I took the time to write a demo to sort out the fluency of image upload and the points that need to be paid attention to in single image and multi image upload.

Multi image upload

Multi image upload, here is just to do the front-end display effect. In the actual project, multi image upload should send a request to the background after uploading a picture each time, and then the background returns to the IMG path for display.

Why must it be introduced into the background to show?

1. If the base64 image path is displayed directly in the foreground, the request will be sent to the background. If there is an error in the interface, it will give the user the illusion that the image is uploaded successfully, but the background does not receive the image;

2. Every time the file changes, the previous files will be covered. If the direct presentation is submitted without Ajax, the final submission with form will only submit the last one.

<!DOCTYPE html>
<html lang="en">
<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 > multi image upload / single image upload
 <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>
  <!--  Where to put the picture -- >
  <div></div>
  <!--  Upload button -- >
  <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;// Get the filelist after uploading the file
    var imgList = [];// Declare an empty array to receive images after uploading
    for(var i = 0; i<files.length;i++){
     var imgUrl = window.URL.createObjectURL(files[i]);// Convert the file to Base64 URL format
     imgList.push(imgUrl);// Press the URL into the array * * if you need to select all the pictures, click the upload button to submit them uniformly, then you can directly transfer the imglist to the background**
     //Loop create img container to place URL on the page
     var img = document.createElement('img')
     img.setAttribute("src", imgList[i]);
     //Delete button
     var close = document.createElement('span')
     close.innerHTML="x"
     close.className='close'
     close.setAttribute('onclick',"imgRemove(this)")
     //Create a box for img
     var item = document.createElement('div');
     item.className='item';
     item.append(img)
     item.append(close)
     var box = document.getElementById("imgList");
     box.append(item);
     //Ajax sends requests to the background
     
    }
   }
   //Delete code
   function imgRemove(obj){
    obj.parentNode.remove()
   }
   
 </script>
</body>
</html>

Single image upload

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


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

According to the above code, you can upload single image and multiple images directly. The following is about the issues that need to be paid attention to when uploading and submitting single and multiple images;

1. A single image upload can be submitted along with the form, and a name value can be given to the input, which can be submitted in the background;

2. Multi image upload cannot be submitted with the form, because the file will only keep the latest after each upload; First, after the image is submitted successfully through Ajax, create a hidden input in the form, set the background return path to the Val value of the input, and then submit it with the form; Note that the name value of the hidden input is written in the form of [], for example: name = [img]]. In this way, when the form is submitted, the background can receive all the pictures;

The above code is applicable to the display after the front end clicks file to upload the image. Specific interaction with the background can be increased according to the needs of the actual project!

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.