FileReader object asynchronously gets the contents of an external file

1. In the web form, you can open the file stored on the computer by defining the type of input as file.

<!DOCTYPE html>
<head>
   <meta charset="UTF-8">
   < title > JS get external file content or directory < / Title >
</head>
<body>
	<input type="file" />
</body>

  

2. What can we get by selecting a file from it? Yes, after selecting the file, it shows the name, not the path. Speaking of this, how to get the path? Here is a FileReader object that can do this

<!DOCTYPE html>
<head>
   <meta charset="ANSI">
   <title>js Get external file content or directory</title>
</head>
<body>
	<input type="file" onchange="getFile(this)" />
	<script>
	   function getFile(target)
	   {
		 var FR=new FileReader();
		 var file=target.files;//Get FileList object
		 console.log(file);
		 console.log(FR);
	   }
	</script>
</body>

  

The change of input value triggers the onchange event to get and view the fileList and FileReader objects

 

3. The FileReader object starts to connect to the FileList object to get what it wants. In fact, the data in FileList should be the arguments of FileReader method. Let's get its path first.

<!DOCTYPE html>
<head>
   <meta charset="ANSI">
   <title>js Get external file content or directory</title>
</head>
<body>
	<input type="file" onchange="getFile(this)" />
	<script>
	   function getFile(target)
	   {
		 var FR=new FileReader();
		 var file=target.files;//Get FileList object
		 FR.onloadend=function(){
			 //Create the img tag and mount it in the body
			 var img=document.createElement('img');
			 img.src=FR.result;//There's absolutely no way
			 document.body.appendChild(img);
		     console.log(FR.result);
		 }
		 if(file[0]){
		     FR.readAsDataURL(file[0]);//Start reading from Blob. Once completed, the result property will contain a string in data: URL format
		 }
	   }
	</script>
</body>

Don't worry about the path. Now people have nothing to do with the content. I'll change the way.

 

<!DOCTYPE html>
<head>
   <meta charset="ANSI">
   <title>js Get external file content or directory</title>
</head>
<body>
	<input type="file" onchange="getFile(this)" />
	<script>
	   function getFile(target)
	   {
		 var FR=new FileReader();
		 var file=target.files;//Get FileList object
		 FR.onloadend=function(){
			 //Load content on body
			 var textarea=document.createElement('textarea');
			 textarea.innerHTML=FR.result;//There's absolutely no way
			 document.body.appendChild(textarea);
		     console.log(FR);
			 console.log(FR.readAsText);
		 }
		 //If you exit without deciding which file to select, and then use FileReader, an error will occur. Frankly, FileList is empty, so you need to judge
		 if(file[0]){
		     FR.readAsText(file[0]);//Start reading from Blob. Once completed, the result property will contain the string as well as the contents of the file being read
		 }
	   }
	</script>
</body>

  

4. What's the compatibility of such a good FileReader object?

 

To learn more about FileReader object properties and methods, we will not discuss them for now

Tags: Javascript

Posted on Fri, 20 Mar 2020 13:58:22 -0400 by nsstudio