js基础进阶--图片上传时实现本地预览功能的原理

欢迎访问我的个人博客：http://www.xiaolongwu.cn

前言

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

实现原理

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

伪代码

//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将选择的文件读取成文本格式；

我的github资源地址：https://github.com/js基础进阶--图片上传时实现本地预览功能的原理.md

我的个人博客地址：http://www.xiaolongwu.cn

我的博客园地址：http://www.cnblogs.com/wuxiaolong555

我的CSDN博客地址：https://blog.csdn.net/wxl1555

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

邮箱：wuxiaolong802@163.com

巴特西

js基础进阶--图片上传时实现本地预览功能的原理

前言

实现原理

伪代码

知识延伸

最新文章

热门文章