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