引子
平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去, 成功之后拿到 URL 再渲染到页面上, 这样做在图片比较小的时候没什么问题, 大一点的话就会比较慢才能看到预览了, 而且还产生了垃圾文件, 所以比较好的是上传之前先在本地预览一下
之前做项找插件的时候就知道纯前端可以实现图片本地预览, 可今天面试的时候被问到时竟然一脸懵逼, 然后竟然无意中就在电脑桌面发现了实现的 demo, 然后根据 demo 查了一下 API, 稍微总结下:
首先得拿到 File 对象
当用 input 标签上传图片时 event 对象中会包含 file 对象的一个集合
event.target.files
核心是 FileReader 对象
根据 MDN 上的说法:
FileReader 对象允许 web 应用程序异步读取存储在用户计算机上的文件 (或原始数据缓冲区) 的内容, 使用 File 或 Blob 对象指定要读取的文件或数据
首先要作为构造函数得到一个 FileReader 的实例对象
var freader = new FileReader();
利用 readAsDataURL()方法读取指定的内容
freader.readAsDataURL(file);
最后就是一个事件处理, 相当于监控读取进度, 我们这里是当读取完成时渲染图片, 所以用 onload
freader.onload = function(e) { console.log(e); myImg.setAttribute('src', e.target.result); }
这里架加载完成之后最终得到的是一个 base64 编码的 src 地址, 具体为什么下次查清楚了再专门写篇关于 base64 编码的文章
完整代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- </head>
- <body>
- <form action="">
- <input type="file" name="files" id="fileTog" accept="image/*" multiple="multiple" onchange="changImg(event)">
- <img alt="暂无图片" id="myImg" src=""height="100px"width="100px">
- </form>
- <script>
- function changImg(e){
- console.log(e)
- var myImg = document.getElementById('myImg');
- for (var i = 0; i < e.target.files.length; i++) {
- var file = e.target.files[i];
- console.log(file);
- if (!(/^image\/.*$/i.test(file.type))) {
- continue; // 不是图片 就跳出这一次循环
- }
- // 实例化 FileReader API
- var freader = new FileReader();
- freader.readAsDataURL(file);
- freader.onload = function(e) {
- console.log(e);
- myImg.setAttribute('src', e.target.result);
- }
- }
- }
- </script>
- </body>
- </html>
后记
通过这件事就暴露了我学习新东西的一个问题, 就是查出来看一遍觉得知道了就行了, 这种习惯是特别害人的, 以后每当有个疑问查出来之后不仅要查是怎么做的, 还要了解一下为什么可以这么做, 所谓知其然知其所以然还有就是平时的代码能用手敲的尽量别复制, 复制一时是爽了, 可要手写的时候写不出来也是听尴尬的
今天是来杭州的第三天, 面试的第二天, 这两天的面试中暴露出的一个重要问题就是平时太依赖搜索引擎, 用脑太少, 连一些简单 API 就没记全, 前端确实还是有很多东西就是要牢牢记住的, 没什么捷径可走, 这些东西就是基础, 没记住就是基础差虽然你并不影响你做出东西来, 但会影响开发效率, 技术要往上走, 这个基石必须稳, 加油记吧!
关于图片上传本地预览的就写到这里了, 如果有什么我理解的不对的地方欢迎大家在评论中指出!
来源: https://www.cnblogs.com/wancheng7/p/8491151.html