纯前端实现 JS本地预览图片
2019-06-06 本文已影响0人
Piszz
前端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
- 样式问题自己调整即可，只是记录解决方案
- 关于File如何自定义样式，一般是将file 的padding-top放大，然后外层div固定高度再overflow，就看不到原始标签的"请上传文件"了，然后内部放一个标签自定义文字即可，当然file层级要在最上面。否则无法点击触发
- 关于老版本兼容，请参考链接中的onTry函数。（https://github.com/Pszz/CanvasFilter/blob/master/src/App.vue）
