JavaScript读取本地Json或txt文件内容

2021-5-22

在前端的开发过程中，有时候上传文件时要求直接读取和显示文件内容，这时候就需要使用JavaScript来对文件进行处理。

实现思路非常简单，先给file选择框绑定onchange事件，在文件选中之后先读取文件，拿到内容后进行对应的数据显示或处理即可，实例代码如下：

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
</head>
<body>
    <input type="file" id="testJsonFile" onchange="openFile(event)" >
 
    <script type="text/javascript">
        //获取选中文件
        var openFile = function (event) {
            var input = event.target;
            var reader = new FileReader();
            reader.onload = function () {
                if (reader.result) {
                    //打印文件内容
                    console.log(reader.result);
                }
            };
            reader.readAsText(input.files[0]);
        };
    </script>
</body>
</html>

实现效果：