js实现图片上传前预览效果

1、效果浏览

2、实现思路，首先保证点击按钮时可以打开本机的文件，选择图片后要对当前选择的图片进行处理，将其处理为64位字符串显示在页面上

3、实现代码
（1）html
 产品缩略图：<img src="./img/upload_img.png" class="upload-img" id="my-upload" onClick="newUploadImg('my-img')"><br>
                         <button type="button"  onClick="newUploadImg('my-img')">上传/修改</button>
                         <input type="file" name="product_file" id="my-img" οnchange="selectImage(this,'my-upload')" style="display:none;">
                    
(2)js
//点击上传图片-Galin
//file_id:是input=file的id
function newUploadImg(file_id){
    $('#'+file_id).click();
}
//选择图片-Galin
function selectImage(file,id){
    var image = '';
    if(!file.files || !file.files[0]){
        return;
    }
    var reader = new FileReader();
    reader.onload = function(evt){
        document.getElementById(id).src = evt.target.result;
        image = evt.target.result;
    }
    reader.readAsDataURL(file.files[0]);
}