唯雪博客

FileReader 获取图片BASE64 代码 并预览

      上传图片与预览,这个需求不是第一次遇到,之前一直都是将文件先提交到服务器,然后使用服务器返回的链接显示图片。这样做存在很多问题,且不说效率性能什么的,自身感受最痛苦的就是对后台依赖性太强,分离开发基本面谈。

        唯雪博客

        (快过年了,放个团子缓解压力,这宝贝叫奇一,外号:奇兔子,奇小方。成都大熊猫繁育基地的超级网红,想看的举个爪爪组团)

      最近发现一个新的前段神器FileReader,官方文档这样解释的:

      FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

        一看就很牛逼啊!!!忍不住躁动要好好学习学习用起来。。。

        老样子原理什么的咱先不追究,先记录一下怎么使用:

        常用方法:

方法名
参数描述
abortnone中断读取
readAsBinaryStringfile(blob)将文件读取为二进制码
readAsDataURLfile(blob)将文件读取为 DataURL(常用)
readAsTextfile,(blob)将文件读取为文本

        

        常用事件处理:

    

事件
描述
onabort中断时触发
onerror出错时触发
onload文件读取成功完成时触发
onloadend读取完成触发,无论成功或失败
onloadstart读取开始时触发
onprogress读取中

   

        常用属性:

    

属性描述
error
只读,一个DOMException,表示在读取文件时发生的错误 。
readyState只读,表示FileReader状态的数字。取值如下:0:还没有加载任何数据,1:数据正在被加载.,2:已完成全部的读取请求.
result
只读,文件的内容。该属性仅在读取操作完成后才有效,数据的格式取决于使用哪个方法来启动读取操作。

官方文档提供了非常详细的使用方法:如何在web应用程序中使用文件

参照文档建一个小demo看看效果:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>fileReader</title>
	<link rel="stylesheet" href="">
</head>
<body>
	<div>
		<input type="file" id="fileBtn">
		<img src="" alt="" id="fileImg">
	</div>
	<script>
		var fileBtn = document.getElementById('fileBtn')
		var img = document.querySelector('#fileImg')
		fileBtn.onchange = function(e){//添加事件监听
			//console.log(e.target.files[0])
			fileReader(e.target.files[0])
		}
		function fileReader(file){
			var reader = new FileReader() //调用FileReader构造函数,创建一个新的filereader对象
			reader.onload = function(e){//文件读取成功完成时触发
				//console.log(e.target.result)
				img.src = e.target.result //将生成的base64 的图片地址加载到页面
			}
			//reader.readAsText(file)//读取文件里的文本
			reader.readAsDataURL(file)//base64 的图片地址
		}
	</script>
</body>
</html>

预览一下效果不错,(绝对不是被奇一这个萌团子迷惑的):

唯雪博客

查看源码,可以发现img的src是base64位编码的dataURL:

唯雪博客


最后一个老生常谈的问题,兼容性。

这么高大上的东西,脚趾头想想ie8肯定是不兼容的,查查文档,果然

    唯雪博客

     有了这个神器,前端就可以任意操控用户上传图片的预览与修改了,而且完全不用担心传太多垃圾图片到服务器,也不用担心脱了了服务器前端无法调试了,真是好处多多。

白俊遥博客
请先登录后发表评论
  • 最新评论
  • 总共1条评论
白俊遥博客

Brame:雪姐,666

2018-03-21 17:51:36 回复