FileReader对象异步获取外部文件的内容

时间 2019-11-07

标签 filereader 对象异步获取外部文件内容繁體版

原文原文链接

一、在网页表单中，定义input的type为file，就能够打开存储在计算机上的文件。html

<!DOCTYPE html>
<head>
   <meta charset="UTF-8">
   <title>js获取外部文件内容或者目录</title>
</head>
<body>
	<input type="file" />
</body>

二、从中选择某个文件，咱们能够获取到什么？没错，选好文件后显出了名称，不是路径。说到这，路径怎么获取，这里有一个FileReader对象能够办到app

<!DOCTYPE html>
<head>
   <meta charset="ANSI">
   <title>js获取外部文件内容或者目录</title>
</head>
<body>
	<input type="file" onchange="getFile(this)" />
	<script>
	   function getFile(target)
	   {
		 var FR=new FileReader();
		 var file=target.files;//获取FileList对象
		 console.log(file);
		 console.log(FR);
	   }
	</script>
</body>

input值的改变触发onchange事件，获取并查看fileList和FileReader对象this

三、FileReader对象开始链接FileList对象，获取想要的东西。其实就是须要FileList里的数据为FileReader方法的实参。咱们先获取它的路径吧。3d

<!DOCTYPE html>
<head>
   <meta charset="ANSI">
   <title>js获取外部文件内容或者目录</title>
</head>
<body>
	<input type="file" onchange="getFile(this)" />
	<script>
	   function getFile(target)
	   {
		 var FR=new FileReader();
		 var file=target.files;//获取FileList对象
		 FR.onloadend=function(){
			 //建立img标签，并挂载body中
			 var img=document.createElement('img');
			 img.src=FR.result;//绝对路径没谁了
			 document.body.appendChild(img);
		     console.log(FR.result);
		 }
		 if(file[0]){
		     FR.readAsDataURL(file[0]);//开始读取Blob中的内容。一旦完成，result属性中将包含一个data：URL格式的字符串
		 }
	   }
	</script>
</body>

不要管路径了，如今人家和内容没有关系，我再改个方法。htm

<!DOCTYPE html>
<head>
   <meta charset="ANSI">
   <title>js获取外部文件内容或者目录</title>
</head>
<body>
	<input type="file" onchange="getFile(this)" />
	<script>
	   function getFile(target)
	   {
		 var FR=new FileReader();
		 var file=target.files;//获取FileList对象
		 FR.onloadend=function(){
			 //把内容加载body上
			 var textarea=document.createElement('textarea');
			 textarea.innerHTML=FR.result;//绝对路径没谁了
			 document.body.appendChild(textarea);
		     console.log(FR);
			 console.log(FR.readAsText);
		 }
		 //若是在选取文件时，没有决定哪一个文件就退出，而后使用FileReader，会发生错误，说白了，FileList是空的，因此须要判断
		 if(file[0]){
		     FR.readAsText(file[0]);//开始读取Blob中的内容。一旦完成，result属性中将包含字符串以及所读取的文件内容
		 }
	   }
	</script>
</body>

四、这么好用的FileReader对象，兼容性又是怎样的呢？对象

想要了解FileReader对象更多属性和方法，咱们暂不讨论blog