1. In the web form, define the input type as file to open the file stored on the computer.
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>js gets 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, the name is displayed, not the path. Speaking of which, how to get the path, here is a FileReader object that can do it
<!DOCTYPE html>
<head>
<meta charset="ANSI">
<title>js gets 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 the FileList object
console.log(file);
console.log(FR);
}
</script>
</body>
The change of the input value triggers the onchange event, obtains and views the fileList and FileReader objects
3. The FileReader object starts to connect to the FileList object to get what you want. In fact, the data in the FileList is required as the actual parameter of the FileReader method. Let's get its path first.
<!DOCTYPE html>
<head>
<meta charset="ANSI">
<title>js gets 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 the FileList object
FR.onloadend=function(){
//Create img tag and mount it in body
var img=document.createElement('img');
img.src=FR.result;//There is no one in the absolute path
document.body.appendChild(img);
console.log(FR.result);
}
if(file[0]){
FR.readAsDataURL(file[0]);//Start reading the content in the Blob. Once complete, the result property will contain a data: URL-formatted string
}
}
</script>
</body>
Don't care about the path, now people have nothing to do with the content, I will change the method.
<!DOCTYPE html>
<head>
<meta charset="ANSI">
<title>js gets 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 the FileList object
FR.onloadend=function(){
// load the content on the body
var textarea=document.createElement('textarea');
textarea.innerHTML=FR.result;//There is no one in the absolute path
document.body.appendChild(textarea);
console.log(FR);
console.log(FR.readAsText);
}
//If you exit without deciding which file to use when selecting a file, and then use FileReader, an error will occur. To put it bluntly, FileList is empty, so you need to judge
if(file[0]){
FR.readAsText(file[0]);//Start reading the contents of the Blob. Once done, the result property will contain the string and the contents of the file that was read
}
}
</script>
</body>
4. What is the compatibility of such a useful FileReader object?
If you want to know more properties and methods of the FileReader object, we will not discuss it for now