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

2018-06-24 02:00:29来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

1、在网页表单中,定义input的type为file,就可以打开存储在计算机上的文件。

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

  

2、从中选择某个文件,我们可以获取到什么?没错,选好文件后显出了名称,不是路径。说到这,路径怎么获取,这里有一个FileReader对象可以办到

<!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对象

 

3、FileReader对象开始连接FileList对象,获取想要的东西。其实就是需要FileList里的数据为FileReader方法的实参。我们先获取它的路径吧。

<!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>

不要管路径了,现在人家和内容没有关系,我再改个方法。

 

<!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>

  

4、这么好用的FileReader对象,兼容性又是怎样的呢?

 

想要了解FileReader对象更多属性和方法,我们暂不讨论

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Vue.js入门

下一篇:JavaScript 高级之面向对象