Js multi-image upload, obtain the base64 value of multiple images

Display effect before uploading

Display the effect after uploading

$('#img_purchase').on('click',function(){  
    $('#purchase').click();  
}); 
$('#img_sale').on('click',function(){  
    $('#sale').click();  
}); 

function getBase64 (file,Callback) {
    let reader = new FileReader()
      let imgResult = ''
      reader.readAsDataURL(file)
      reader.onload = function () {
        imgResult = reader.result
      }
      reader.onerror = function (error) {
        Callback(error)
      }
        reader.onloadend = function () {
        Callback(imgResult)
      }
};

    $(document).on('change', '#purchase', function () {
        var filePath = $(this).val()
        console.log(filePath);
        var arr_prepath=this.files;
        console.log(arr_prepath);
        for (var i=0;i<arr_prepath.length;i++){
            getBase64(arr_prepath[i],function(res){
        console.log(res);
                $('.img_addpurchase').before('<div class="le_img">'+
                        '<img class="escimgs" src="__JHWIMAGES__/ewc.png" alt="">'+
                        '<img class="imgs" src="'+res +'" alt="">'+
                    '</div>',$('.purchase_top').firstChild);
            })
        }
    });
Copy the code