SoFunction
Updated on 2025-03-02

js implements avatar upload and preview submission

When a user registers an account or modifys information, the user will need to select an image locally as the avatar and preview it at the same time.

There are two common ideas: one is to upload the image to the server's temporary folder, return the url of the image, and then render it on the html page; the other idea is to preview the image directly in local memory, and upload it to the server for saving after the user confirms the submission.

These two methods have their own advantages and disadvantages. Method 1 is obvious, which wastes traffic and server resources; Method 2 increases the burden on the browser and requires higher browser compatibility.

Here is a method of previewing the image directly in local memory, and uploading it to the server to save after the user confirms the submission.

html

<div class="reHead">
   <P class="content-format">Avatar supportjpg、png、jpegFormat，The maximum file size cannot exceed1M</P>
   <div class="content">
     <form method="post" enctype="multipart/form-data"  class="headForm">
       <div  class="iconfont icon-bianjitouxiang">
         <input type="file" name="test"  class="fileHead" accept="image/gif, image/jpeg, image/png, image/jpg" multiple="multiple">
       </div>
       <div class="headMain">
         <span class="file">Upload file</span>
         <p  class="fileName"></p>
       </div>
     </form>
   </div>
   <div class="but">
     <button class=" orangeHead" ><a href="" title=" rel="external nofollow" Edit information" target="_blank">save</a></button>
   </div>
 </div>

js upload avatar

<script type="text/javascript" src="./"></script>
  <script>
    var fileInput = ('test-image-file'),
      info = ('test-file-info'),
      preview = ('test-image-preview');
      dataBase64 = '',
    // = 'url(../../img/)'; //The picture displayed by default
    // Listen to change events:    ('change', upImg);

    // Logical function for uploading avatar    function upImg(){
       = '';    // Clear background image      if (!) {   // Check whether the file is selected:        $('#test-image-preview').addClass('icon-bianjitouxiang');
         = 'No file selected';
      }else{
        $('#test-image-preview').removeClass('icon-bianjitouxiang');
         = '';
      }
      
      var file = [0];  // Get File reference      var size = ;
      if (size >= 1 * 1024 * 1024) {   //Judge file size         = 'The file is greater than 1 megabyte!';
         = '';
        $('#test-image-preview').addClass('icon-bianjitouxiang');
        return false;
      }
      
      if ( !== 'image/jpeg' &&  !== 'image/png' &&  !== 'image/gif') {  // Get File information:         = 'Not a valid picture file!';
         = '';
        $('#test-image-preview').addClass('icon-bianjitouxiang');
        return;
      }

      // Read the file:      var reader = new FileReader();
       = function (e) {
        dataBase64 = ;   // 'data:image/jpeg;base64,/9j/4AAQSk...(base64 encoding)..}'         = 'url(' + dataBase64 + ') ';
         = 'no-repeat';
         = ' 100% 100%';
      };
      // Read the file in the form of DataURL:      (file);
      // (file);
    }

js submit avatar to the server

$("#upImgSub").click(function () {
      $.ajax({
        type:'post',
        data:{'newHead':dataBase64},
        async:false,   // When the value of the async attribute is false, it is synchronized. The Ajax request locks the entire browser. Only after the ajax request returns the result, the alert statement after ajax is executed.   (Although it is feasible, it is not recommended) // When the value of the async attribute is true, it is asynchronous, that is, it will not wait for the result returned by the ajax request, and the alert statement after ajax will be directly executed.     (Asynchronous request resolution is introduced later)        dataType:'json',
        url:'/index/img',
        success:function (res) {  // Return to success          if( === 200){
            alert(msg)     // Upload successfully          }else{
            alert(msg)     // Upload failed          }
        },
        error:function () {
          alert("Interface Error");    // Return failed        }
      })
    });

When the value of the async attribute is false, it is synchronized. The Ajax request locks the entire browser. Only after the ajax request returns the result, the alert statement after ajax is executed. (Although it is feasible, it is not recommended) When the value of the async attribute is true, it is asynchronous, that is, it will not wait for the result returned by the ajax request, and the alert statement after ajax will be directly executed. (Asynchronous request resolution is introduced later)

css

body{
  font-size: 12px;
}
.reHead{
  margin: 15px 4%; 
}
.headForm{
  text-align: center;
  padding: 40px 0 70px 0;
}
#test-image-preview {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: #F5F5F5;
  color: #fff;
  font-size: 60px;
  text-align: center;
  line-height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-bottom: 26px;
}
.fileHead{
  position: absolute;
  width: 100px;
  height: 100px;
  right: 0;
  top: 0;
  opacity: 0;
}
.content-format {
  font-size: 12px;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}
.headMain{
  height: 40px;
}
.file {
  position: relative;
  background: #fff;
  color: #F39800;
  font-weight:800;
}
.file input {
  position: absolute;
  font-size: 12px;
  right: 0;
  top: 0;
  opacity: 0;
}
.fileName {
  line-height: 28px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
.but{
  text-align: center;
}
.orangeHead{
  width: 40%;
  height: 40px;
  background: #f60;
  border: none;
}
.orangeHead a{
  color: #fff;
}

The above is the detailed content of js implementing avatar upload and previewing the submission. For more information about js avatar upload, please follow my other related articles!