FileReader预读取文件/图片

悠悠 2021-07-24 13:41 539阅读 0赞

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>