文件上传读取文件里面内容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <p>

        <label>请选择一个文件：</label>

        <input type="file" id="file" />

        <input type="button" value="读取文本文件utf-8" onclick="readAsText()" />

    </p>

    <div id="result" name="result"></div>

</body>

<script type="text/javascript">

    var result = document.getElementById("result");

    var file = document.getElementById("file");

    if (typeof FileReader == 'undefined') {

        result.InnerHTML = "<p>你的浏览器不支持FileReader接口！</p>";

        //使选择控件不可操作

        file.setAttribute("disabled", "disabled");

    }

    //读取文本数据

    function readAsText() {

        var file = document.getElementById("file").files[0];

        var reader = new FileReader();

        //将文件以文本形式读入页面

        reader.readAsText(file, "UTF-8");

        reader.onload = function (f) {

            var result = document.getElementById("result");

            //显示文件

            result.innerHTML = this.result;

        }

        console.log(reader);

    }

</script>

</html>

相关阅读:
angularjs中的指令
git笔记
webpack.config.js
webpack开发react常用插件和依赖
angularjs中的分页指令
angularjs中的排序和过滤
react学习
gulp学习
Javascript 判断变量类型的陷阱与正确的处理方式
Fn.bind.apply() 解决 new 操作符不能用与 apply 或 call 同时使用

原文地址：https://www.cnblogs.com/lxwphp/p/16811996.html