纯前端实现 JS本地预览图片

前端JS上传图片，并预览图片，免后端

HTML

<!-- 上传标签 -->
<input type="file" id="file"/>


<!-- 图片标签 - 用于预览 -->
<img id="previewImg"/>

JavaScript

// 根据ID获取file内容
var file = document.getElementById('file').files[0]

// 创建文件读取对象
var read = new FileReader()

// 读取成base64
var img64 = read.readAsDataURL(file)

// 赋值给图片即可
document.getElementById('previewImg').src = img64

1. 样式问题自己调整即可，只是记录解决方案
2. 关于File如何自定义样式，一般是将file 的padding-top放大，然后外层div固定高度再overflow，就看不到原始标签的"请上传文件"了，然后内部放一个标签自定义文字即可，当然file层级要在最上面。否则无法点击触发
3. 关于老版本兼容，请参考链接中的onTry函数。（https://github.com/Pszz/CanvasFilter/blob/master/src/App.vue）