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

<!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>

posted @ 2022-10-20 23:42  码农编程进阶笔记  阅读(42)  评论(0)  编辑  收藏  举报
返回顶部 有事您Q我