之前做项找插件的时候就知道纯前端可以实现图片本地预览，可今天面试的时候被问到时竟然一脸懵逼，然后竟然无意中就在电脑桌面发现了实现的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){
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就没记全，前端确实还是有很多东西就是要牢牢记住的，没什么捷径可走，这些东西就是基础，没记住就是基础差。虽然你并不影响你做出东西来，但会影响开发效率，技术要往上走，这个基石必须稳，加油记吧！
相关推荐：
jquery实现兼容浏览器的图片上传本地预览功能_jquery
以上就是FileReader上传图片前在本地预览功能的详细内容，更多请关注php中文网其它相关文章！
