JavaScript FileReader API 处理文件示例

allway2

已于 2022-06-23 17:00:08 修改

阅读量598

点赞数

文章标签： javascript 前端 java

于 2022-06-23 11:23:29 首次发布

本文链接：https://blog.csdn.net/allway2/article/details/125423619

版权

文件阅读器 API 提供文件阅读器对象，可用于从本地计算机读取文件并在网页上使用其数据。您甚至可以使用它从客户端的本地计算机读取文件，然后将其数据传输到服务器。

读取文件和读取其数据可以通过多种方式完成，但有时最好使用几乎所有 Web 浏览器都支持的 object\API。这就是为什么 FileReader API 是 vanilla JavaScript 中用于读取文件内容的最常用对象之一。

文件阅读器对象

要创建一个新的文件阅读器对象，您需要首先使用“new”关键字调用FileReader()构造函数。之后，您就可以开始使用该对象的各种功能了。要了解有关此构造函数的更多信息，您可以单击此处访问 MDN 的官方文档。

文件阅读器方法

文件阅读器对象带有许多不同的方法来帮助我们解析正在读取的文件的数据。其中一些方法由浏览器自动执行，称为事件处理程序方法，例如，一旦文件阅读器完成读取文件内容，就会自动调用“onload()”方法。

要访问文件阅读器对象的方法，请使用点运算符“.” . 可以使用文件阅读器对象访问的一些方法和变量是：

object. result：用于获取被读取文件的内容
object.readAsText：读取文件内容并将其解析为文本
object.abort：中止当前的读操作

还有更多可以在他们的官方文档网页上阅读。

文件阅读器示例

为了演示文件阅读器 API 的使用，我们需要一个带有type="file"输入字段的 HTML 网页，我们可以使用 HTML 文件中的以下行来创建它：

<center>

<input type="file" />

</center>

这将为我们提供以下网页：

注意：我们没有在输入字段中使用任何 id 或 class 属性，因为我们将使用查询选择器来引用我们的输入字段。

对于 JavaScript 代码，我们要做的第一件事是使用查询选择器选择输入字段：

const input = document.querySelector(`input[type="file"]`);

接下来，我们将在变量input上添加一个“change”事件监听器，它将调用一个函数来使用以下行加载文件的内容：

input.addEventListener("change", function (e) {

}, false);

每次输入标签加载文件时都会执行此函数事件监听器，我们可以使用“input.file”数组访问该文件。要显示加载文件的详细信息，我们可以使用以下行：

console.log(input.files[0])

我们在控制台上得到以下输出：

在函数内部，我们将使用以下行创建文件阅读器对象：

const reader = new FileReader();

我要读取的文件是一个文本文件，所以在这里我将使用文件阅读器对象的方法readAsText使用以下行将文件的内容解析为文本数据：

reader.readAsText(input.files[0]);

现在，我们可以使用reader.result访问我们读取和解析的文件的内容。当文件读取器对象完成读取文件时，会自动调用onload()方法，因此我们可以使用以下命令在完成读取后显示文件的内容：

reader.onload = function () {

console.log(reader.result);

};

完整的代码片段是：

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>

    <center>

        <input type="file" />

    </center>
    <script>
        const input = document.querySelector(`input[type="file"]`);
        input.addEventListener(
                "change",
                function (e) {
                    console.log(input.files[0]);
                    const reader = new FileReader();
                    reader.readAsText(input.files[0]);
                    reader.onload = function () {
                        console.log(reader.result);
                    };
                },
                false
                );
    </script>
</body>
</html>

运行该文件并在本地计算机上选择一个文本文件，如下所示：

您将在控制台上观察到以下结果：

到这里，您已经阅读了文件的内容并将它们打印到控制台上。

使用图像

要读取图像并将其显示到控制台上，您需要首先使用以下行读取带有readAsDataURL的文件：

reader.readAsDataURL(input.files[0]);

要在网页上显示图像，您需要使用以下行在onload()函数内创建一个新的 Image 变量：

reader.onload = function () {

const img = new Image();

};

},

然后在这个onload函数中，您将设置我们创建的图像变量的源等于文件读取器对象的结果：

img.src = reader.result;

最后，我们将使用以下行将此图像变量附加到 Document：

document.body.appendChild(img);

完整的代码片段是：

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>

    <center>

        <input type="file" />

    </center>
    <script>
        const input = document.querySelector(`input[type="file"]`);

        input.addEventListener(
                "change",
                function (e) {
                    console.log(input.files[0]);
                    const reader = new FileReader();
                    reader.readAsDataURL(input.files[0]);
                    reader.onload = function () {
                        const img = new Image();
                        img.src = reader.result;
                        document.body.appendChild(img);
                    };
                },
                false
                );
    </script>
</body>
</html>

运行该文件后，您将获得以下输出：

好了，现在您知道如何使用 File Reader API 来读取本地计算机上的文件了

结论

文件阅读器 API 是带有原生 JavaScript 的内置 API，几乎所有 Web 浏览器都支持。这个文件阅读器 API 返回给我们一个文件阅读器对象，我们可以通过选择解析方法来读取文件的内容。在这篇文章中，我们了解了文件读取器 API、文件读取器对象以及如何使用文件读取器对象来读取文本文件和图像文件。我们甚至通过将图像附加到文档中来在 Web 浏览器上显示图像。