文件内容读取(字符串)

阅读数: 2021-01-20

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="file" id="file">
    <button onclick="readFile()">展示文件内容</button>
    <!-- <div style="width: 300px; height: 400px;background-color: #ccc"></div> -->

    <script>
        function displayText(path) {
            const xhr = new XMLHttpRequest();
            xhr.open('get', path);
            xhr.responseType = 'blob';
            xhr.send();
            xhr.onload = function () {
                if (this.status === 200 || this.status === 304) {
                    const fileReader = new FileReader();
                    fileReader.readAsText(this.response);
                    fileReader.onload = function () {
                        console.log(this.result)
                    };
                }
            };
        }
        // 读取网络文件
        // displayText('http://xxx.xxx.xxx/media/xxx.txt');

		// 读取本地文件
        function readFile(){
            const node = document.getElementById('file');
            const url = URL.createObjectURL(node.files[0]);
            displayText(url);
            URL.revokeObjectURL(url);
        }
    </script>
</body>
</html>

值得注意的是，出现乱码的情况需要指定编码。比如我下面读取的txt文件。可以通过FileReader.readAsText(blob[, encoding]); 中的encoding指定编码，默认是utf-8

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/8e8d022b.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！