js获取input上传图片装换为base64格式图片

Posted 2020-10-07 ConfigSzy

<input name="upimage" id="upload_file" type="file">
<img src="/img/touxiang.jpg" id="showImage" ><br /><br />


<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> //jq cdn
　　<script type="text/javascript">
　　　　var imgurl = ‘aaa‘;
　　　　$(‘#upload_file‘).change = function (){
            gen_base64();
        };
　　　　function $_(id) {
　　　　　　return document.getElementById(id);
　　　　 }
　　　　function gen_base64() {
　　　　　　var file = $_(‘upload_file‘).files[0];
　　　　　　r = new FileReader();  //本地预览
　　　　　　r.onload = function(){
 　　　　 　console.log(r.result)    //r.result 即为base64编码
　　　　　　$(‘#showImage‘).attr(‘src‘,r.result)  
        }
        r.readAsDataURL(file);    //Base64
     }
</script>