File and FileReader
JavaScript File and FileReader （JavaScript文件和文件阅读器）
Let’s explore File and FileReader in JavaScript. （让我们了解一下JavaScript中的File和FileReader。）
As a rule, a file object inherits from the Blob. It can be extended to filesystem-related facilities. （通常，文件对象继承自Blob。它可以扩展到与文件系统相关的设施。）
You can obtain it in two ways:
new File(fileParts, fileName, [options])
The file objects have the same properties as Blob. But, they also have some additional properties such as the name (the file name) and the lastModified(last modification timestamp). （文件对象具有与Blob相同的属性。但是，它们还具有一些其他属性，例如名称（文件名）和lastModified （上次修改时间戳）。）
Let’s see how the File object can be received from <input type=“file”>:
<!DOCTYPE html>
<head>
<title>Title of the Document</title>
</head>
<body>
<input onchange="showFile(this)" type="file">
<script>
function showFile(input) {
let file = input.files[0];
alert(`File name: ${file.name}`);
alert(`Last modified: ${file.lastModified}`);
}
</script>
</body>
</html>
FileReader
FileReader
The purpose of the fileReader is to read data from Blob objects. It provides data with the usage of events because reading from disk might take long. （FileReader的目的是从Blob对象读取数据。 它提供了事件使用情况的数据，因为从磁盘读取可能需要很长时间。）
The constructor of the FileReader is the following:
let fileReader = new FileReader(); // not a arguments
Its primary methods are as follows:
readAsArrayBuffer(blob) – reading data in binary format ArrayBuffer. （- readAsArrayBuffer (BLOB) –以二进制格式ArrayBuffer读取数据。）
readAsText(blob, [encoding]) – reading the data like a text string with particular encoding (utf-8 by default). （- readAsText (blob, [encoding]) –将数据读取为具有特定编码的文本字符串（默认情况下为utf-8 ）。）
readAsDataURL(blob) – reading the binary data and encoding that as base64 data url. （- readAsDataURL (BLOB) –读取二进制数据并将其编码为base64数据URL。）
abort() – canceling the action. （- abort () –取消操作。）
The events that can trigger during the process of reading are the following:
loadstart
progress （进度）
load （负荷）
abort （中止）
error （错误）
loadend
After the reading is over, the result can be accessed in this way:
The result is reader.result. （-结果是reader.result。）
The error is reader.error. （-错误为reader.error。）
The error and load are the most commonly used events. （错误和加载是最常用的事件。）
An example of reading a file will look as follows:
<!DOCTYPE html>
<head>
<title>Title of the Document</title>
</head>
<body>
<input onchange="readFile(this)" type="file">
<script>
function readFile(input) {
let file = input.files[0];
let fileReader = new FileReader();
fileReader.readAsText(file);
fileReader.onload = function() {
alert(fileReader.result);
};
fileReader.onerror = function() {
alert(fileReader.error);
};
}
</script>
</body>
</html>
Use the text inside the file in an element
fileReader.result
<!DOCTYPE html>
<head>
<title>Title of the Document</title>
</head>
<body>
<input onchange="readFile(this)" type="file">
<p id="result"></p>
<script>
function readFile(input) {
let file = input.files[0];
let fileReader = new FileReader();
fileReader.readAsText(file);
fileReader.onload = function() {
document.getElementById("result").innerText = fileReader.result
（document.getElementById ("result") .innerText = fileReader.result）
};
fileReader.onerror = function() {
alert(fileReader.error);
};
}
</script>
</body>
</html>
Summary
Summary （概要）
File objects use the methods and properties of Blob. But, they have additional properties such as name and lastModified. File objects are usually received from user input such as <input> or Drag and drop events.
FileReader objects are capable of reading from a file or a blob, in one of the formats below:
String （字符串）
ArrayBuffer
Data URL, base-64 encoded. （-数据URL ， base-64编码。）