记录--js读取文件并显示在页面/输入内容显示在页面（解析换行）

最新推荐文章于 2023-04-26 13:54:22 发布

会自己走的CV码农

最新推荐文章于 2023-04-26 13:54:22 发布

阅读量2.2k

点赞数 2

分类专栏：记录

本文链接：https://blog.csdn.net/weixin_41611635/article/details/102543119

版权

记录专栏收录该内容

41 篇文章 0 订阅

订阅专栏

记录新碰到需求，用于商品图文显示

输入内容显示需要使用textarea标签，原生input不支持换行，textarea记得加属性wrap="hard"这里有详细说明

然后是js，直接贴代码var arr=inp.value.replace(/\r/g,'').split('\n');这样arr获取到的是一个数组在这里插入图片描述
然后使用循环在页面显示

for(var i in arr) {
	ppp.innerHTML += arr[i] + '<br />'
}

显示效果：
在这里插入图片描述

读取文件并显示直接贴代码：

let file = files[0];
let reader = new FileReader();
reader.onload = function(){
	var array=this.result.replace(/\r/g,'').split('\n');
	for(var l in array) {
		pp.innerHTML += array[l] + '<br />'
	}
};
reader.readAsText(file, "gb2312");

注意！要加reader.readAsText(file, "gb2312")防止中文乱码，其他类型的文件也有对应的编码
下面贴全部代码：

<!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>
    <div>
        <textarea rows="3" cols="20" id="inp" wrap="hard"></textarea>
        <button onclick="an(this)">按一下</button>
        <p id="ppp"></p>
    </div>
    <div>
        <input type="file" id="file" onchange="handleFiles(this.files)">
        <p id="pp"></p>
    </div>
    <script>
        var inp=document.getElementById("inp");
        var ppp=document.getElementById("ppp");
        var objFile = document.getElementById("file");
        var pp = document.getElementById("pp");
        var s = ''
        
        function an() {
            var arr=inp.value.replace(/\r/g,'').split('\n');
            for(var i in arr) {
                ppp.innerHTML += arr[i] + '<br />'
            }
        }

        
        function handleFiles(files) {
            if(files.length){
                let file = files[0];
                let reader = new FileReader();
                console.log(file)
                reader.onload = function(){
                    // pp.innerHTML = this.result;
                    var array=this.result.replace(/\r/g,'').split('\n');
                    for(var l in array) {
                        pp.innerHTML += array[l] + '<br />'
                    }
                };
                reader.readAsText(file, "gb2312");
                // reader.readAsText(file, "utf-8");
            }
        }
    </script>
</body>
</html>

会自己走的CV码农

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
记录--js读取文件并显示在页面/输入内容显示在页面（解析换行）

记录新碰到需求，用于商品图文显示输入内容显示需要使用textarea标签，原生input不支持换行，textarea记得加属性wrap="hard"这里有详细说明然后是js，直接贴代码var arr=inp.value.replace(/\r/g,'').split('\n');这样arr获取到的是一个数组然后使用循环在页面显示for(var i in arr) { ppp.innerH...
复制链接

扫一扫