FileReader预读取文件/图片

最新推荐文章于 2022-11-03 15:57:01 发布

神奇大叔

最新推荐文章于 2022-11-03 15:57:01 发布

阅读量336

点赞数

分类专栏： HTML5 新特性文章标签： FileReader

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103974561

版权

HTML5 新特性专栏收录该内容

14 篇文章 1 订阅

订阅专栏

FileReader
	1、是h5中新增的类，用来对input中type='file'类型进行处理的类
	2、能够对上传的文件进行预先读写，实现预览效果
	
	文件读写是三种方式:

		1、文本读取
		2、图片url读取(读取结果即为img元素的src属性)
		3、二进制流读取

	用法:
		(1)创建fileReader对象
			var fileReader=new FileReader();
			
		(2)设置读取方式
			fileReader.readAsArrayBuffer(file);
			fileReader.readAsBinaryString(file);
			fileReader.readAsDataURL(file,'字符集可选');  转换为base64编码
			fileReader.readAsText(file);  转换为字符串
			
		(3)监听文件读取结束回调
			fileReader.onload=function(e)
			{
				fileReader.result;  返回读取结果,方式一
				e.target.result;    返回读取结果,方式二
			}
			
		(4)终止文件读取
			fileReader.abort();
		
		示例:
			文本
				fileReader.readAsText(从input元素中获取的文件流即input.files中选择的文件,'GB2312'解决中文乱码/可选);

				文件读取完毕执行回调函数
				fileReader.onload=function(){
					//读取文件内容
					console.log(fileReader.result);
				}

			图片
				fileReader.readAsDataURL(从input元素中获取的文件流即input.files中选择的文件);
				//图片读取完毕执行回调函数
				fileReader.onload=function(){
					//读取图片内容
					console.log(fileReader.result);
				}

代码示例：

<html>
<head>
	<meta charset="utf-8">
	<title></title>


	<style>

	</style>
</head>
<body>

	<input type="file" multiple='multiple'>
	<button>上传文件</button>

	<div style="width:200px;height: 200px;border: solid 1px black;">

	</div>
	<img src="" alt="">

	<script>

		var btn=document.querySelector('button');
		var input=document.querySelector('input');
		var div=document.querySelector('div');
		var img=document.querySelector('img');

		btn.onclick=function()
		{
			//文本读取
			 var fileReader=new FileReader();
			 fileReader.readAsText(input.files[0],'GB2312');
			 fileReader.onload=function()
		 	 {
			 	div.innerHTML=fileReader.result;
			 }

			//图片读取
			var fileReader=new FileReader();
			fileReader.readAsDataURL(input.files[0]);
			fileReader.onload=function()
			{
				img.src=fileReader.result;
			}
		}

	</script>
	
</body>

</html>

神奇大叔

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
FileReader预读取文件/图片

FileReader 1、是h5中新增的类，用来对input中type='file'类型进行处理的类 2、能够对上传的文件进行预先读写，实现预览效果文件读写是三种方式: 1、文本读取 2、图片url读取(读取结果即为img元素的src属性) 3、二进制流读取用法: var fileReader=new FileReader(); 文本 fileRead...
复制链接

扫一扫