Fork me on GitHub

图片上传时实现本地预览功能的原理

前言

最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效果的实现原理;

实现原理

通过input的 type = file属性和js的内置FileReader对象,利用FileReader对象的readAsDataURL方法,把图片数据转成base64字符串数据,然后把这个base64字符串数据赋值给一个图片标签的src。

伪代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//input标签,获取本地图片
<input type="file" onchange="uploadImg(this)" accept="image/*"/>

//预览图片标签
<img id="viewImg"/>


function uploadImg(fileDom) {
//取到file文件的本地路径,就是你电脑上的存储路径
console.log(fileDom.value);

// 获取图片数据
var file = fileDom.files[0];

// 获取图片名字
console.log(file.name);

// 获取图片文件大小,单位为byte
console.log(file.size);

var reader = new FileReader();
reader.readAsDataURL(file);

//确保文件成功获取,base64数据量比较大
reader.onload = function (e) {
var img = document.getElementById("viewImg");
img.src = e.target.result;
//或者 img.src = this.result; 因为e.target == this
}
}

知识延伸

FileReader除了readAsDataURL方法之外,还有另外两个比较重要的方法,分别为readAsBinaryString 将选择的文件读取成二进制和readAsText将选择的文件读取成文本格式 ;

如果您对我的博客内容有疑惑或质疑的地方,请在下方评论区留言,或邮件给我,共同学习进步。

邮箱:wuxiaolong802@163.com

您的支持将鼓励我继续创作!