正常情况下，我们上传文件要实现本地预览 很大部分可能是 上传完接口之后 通过接口返回的地址 进行本地预览
但要是 上传前 我想在本地预览这个咋说呢，好像要处理下吧
其实 这个就得通过一些特殊手段处理了
1. 生成base64的方式预览
看个例子吧 核心代码
var a = new FileReader();
a.onload = function(res) {
console.log(res)
$('img').attr('src', res.target.result)
}
a.readAsDataURL(file)
html结构
<input type="file" name="app" id="file"><img src="" alt="">
$('#file').on('change', function() {var file = this.files[0];var a = new FileReader();a.onload = function(res) {console.log(res)$('img').attr('src', res.target.result)} a.readAsDataURL(file) })
这样就实现了 等我们 通过原生的FileReader 方法
2. 生成临时的地址 进行访问
原生方法window.URL.createObjectURL
$('#file').on('change', function() {var file = this.files[0];var url = window.URL.createObjectURL(file);$('img').attr('src', url)})
不过 用完之后 还是最好释放了 哈
revokeObjectURL(url)
看下实际效果吧
是不是 很神奇 好了 菜鸟要继续去学习了
关注我 持续更新前端知识
