JS打开本地text文件并显示

最新推荐文章于 2024-08-28 12:34:01 发布

Kk～有点皮

最新推荐文章于 2024-08-28 12:34:01 发布

阅读量2.2k

点赞数 1

分类专栏：程序设计文章标签： javascript html5 css

本文链接：https://blog.csdn.net/weixin_44216612/article/details/112363188

版权

程序设计专栏收录该内容

18 篇文章 1 订阅

订阅专栏

JS打开本地txt文件并显示

直接呈上完整的jsp代码
包含简单的css样式和js代码（核心）

read.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    <h1>网易阅读</h1>
    <style>
        .blue {
            color: blueviolet;
        }
        .font {
            background-color: burlywood;
        }
        .note {
            font-size: 16px;
            font-weight: 700;
            /*font-style:*/ 
            color: #f60;
            text-indent: -2em;
            
        }
        * {
            text-align: center;
        }
        a {
            text-decoration: none;
        }
        
    </style> 
    </head>
    <body class="font" >
        <div class="note">
            请先选择文件
        </div>
        <div class="blue">
            <a ><input type="file" id="selectFiles" onchange="dealSelectFiles()"  value="选择文件" ></a>
            
        </div>
        
           
        <!--<img src="images/11.jpg" height="250" width="300"><br>-->
        <ul>
            <textarea id="txt" rows="25" cols="65" style="background:#99D3F5"  > </textarea>
        </ul>

        
        <p>更多内容请<a href="https://www.baidu.com" target="_blank">百度一下</a></p>
<script type="text/javascript">

		function dealSelectFiles() {
 var file = document.getElementById("selectFiles").files[0];
  var name = file.name;//读取选中文件的文件名
var path = document.getElementById("selectFiles").value;//读取选中文件的路径
console.log("文件名:"+name+"大小:"+path);
            //获取读取我文件的File对象
            //alert(title:'hello',content:'success');
            var reader = new FileReader();//这是核心,读取操作就是由它完成.
            reader.readAsText(file);//读取文件的内容,也可以读取文件的URL
            reader.onload = function () {
                //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
                document.getElementById("txt").value =this.result;
            }
        }
</script>

    </body>
</html>

通过document.getElementById(“txt”).value =this.result;实现把获到的本地文档显示在文本域