JS-上传图片前预览图片

1.以change事件来触发
2.一开始将上传的档案转换为base64字串，Base64是一种基于64个可列印字元来表示二进位资料的表示方法。(参考)
2.建立FileReader物件，FileReader接口提供读取文件的方法和包含读取结果的事件模型
3.在使用onload(页面与图片加载完成的时候)以e.target.result的结果放入图片读取
4.readAsDataURL方法会读取指定的Blob 或 File 对象。读取操作完成的时候，这里为转换成Base64

html

<input type='file' /><div class="container">  <img /></div>

jquery

$('input').on('change', function(e){        const file = this.files[0];//将上传档案转换为base64字串        const fr = new FileReader();//建立FileReader物件  fr.onload = function (e) {    $('img').attr('src', e.target.result);//读取的结果放入图片  };        // 使用 readAsDataURL 将图片转成 Base64  fr.readAsDataURL(file);});

参考：
https://exfast.me/2019/04/javascript-preview-image-when-front-end-uploads-image/
codepen