前言
我最近在做自己个人博客的时候,遇到一个前端的问题,就是如何实时预览 input 标签上传的图片。一般的 <input type="file’ /> 标签是不能实现实时预览的。
解决方案
可以通过 file 标签和 js 的 FileReader 接口来实现。
- 把选择的图片文件调用 readAsDataURL 方法
- 把图片数据转成 base64 字符串形式显示在页面上
html 代码:
<div class="am-form-group am-form-file">
<div class="tpl-form-file-img">
<img id="backimg" src="/static/admin/assets/img/code.png" class="am-img-responsive" alt="">
</div>
<input id="doc-form-file" type="file" multiple="" onchange="reads(this)">
</div>
javascript 代码:
function reads(obj) {
var file = obj.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (ev) {
$("#backimg").attr("src", ev.target.result);
}
}