标题关于文件的FileReader API的使用详细说明

在使用的时候首先应该新建一个FileReader对象。

var fr=new FileReader();

2.明确一些fr具体读取文件的方法。

readAsDataURL()表示的是用URL的格式将文件内容读出（常用）
readAsArrayBuffer()表示的是ArryBuffer对象表示内容
readAsBinaryString()表示用原始的二进制数据类型表示文件内容
readAsText()表示用字符串来表示文件内容（常用）

3.明确一些fr的属性

error：表示读取文件时发生的错误。
readyState：表示FileReader对象现在的状态。
result：表示的是读取到的文件内容。
abort：表示的终止文件读取的操作

4.明确一些fr的事件

onabort：当读物操作被终止时被调用
onerror：当读取文件发生错误时被调用
onload：当读取操作完成时调用
onloadend：当读取操作完成时被调用，不管是读取成功还是读取失败。该操作在onload,和onerror之后调用
onloadstart：当读取操作即将开始前调用
onprogress：在读取数据过程中周期性调用

5.具体案例(代码已注释)

<body>
    <input type="file" id="myfile" onchange="loadfile()">//设置当file读取文件是触发loadfile()函数
    <div id="content"></div>//用来存放读取到的信息
    <script>        
    	//获取标签
    	var myfile=document.getElementById("myfile");        
    	var con=document.getElementById("content");       
 	//引入FileReader
 	var fr=new FileReader();
 	function loadfile(){
    
    
 	//读取input标签的第一个文件            
 	fr.readAsDataURL(myfile.files[0]);
	//当加载成功时，执行该函数
 	fr.onload=function(e){
    
    
 	//e.target.result表示的是读取文件的url信息
 		var str='<img src="'+e.target.result+'">';                
 		con.innerHTML+=str;            
 	    }        
     }    
     </script>
</body>

6.除了使用FileReader也可以使用window.URL.createObjectURL()
相关代码

<body>    
	<input type="file" id='myFile' onchange="Fileload()">
	<div id="div"></div>
</body>
<script>    
	var myFile=document.getElementById('myFile');
	var div=document.getElementById('div');    
	function Fileload(){
    
           
       		var url=window.URL.createObjectURL(myFile.files[0]);
        	var str='<img src="'+url+'"/>'
             	div.innerHTML=str;
       }
</script>

使用FIleReader和window.URL.createObjectURL()的区别是：FIleReader读取的e.target.result是base64编码的，比较长。但是使用window.URL.createObjectURL()读取的是地址，占用字节长度比较短

标题关于文件的FileReader API的使用详细说明

标题关于文件的FileReader API的使用详细说明

猜你喜欢