利用js要怎么样读取txt的内容并显示在html

利用js要怎么样读取txt的内容并显示在html

如txt文件内容是:
1111
222
333

那么如果读取了html同样显示:
111
222
333
html读取出txt内容后,需要与txt一样换行。

用ajax读取即可
你题目的解答代码如下:

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<pre id="text"></pre>
<script type="text/javascript">
$.ajax({
    url: "xxx.txt",
    type: "get",
    dataType: "text",
    success: function (data) {
        $("#text").text(data);
    },
    error: function (jqXHR, status, thrown) {
        alert(thrown);
    }
});
</script>

如有帮助,请点击我的回答下方的【采纳该答案】按钮帮忙采纳下,谢谢!

img


<html>
<header>
    <script src="https://code.jquery.com/jquery-3.5.0.js" type="text/javascript" ></script>
</header>
<body>
<div id='test1' style="word-break:break-all">
</div>
</body>
<script type="module">
    window.onload = function(){
          
            $.get('1.txt').then(function(content){
               console.log(content);
               $("#test1").html('<pre>'+content+'</pre>');
            });
        }
</script>
</html>

通过file选择文件,js获取到表单上传来的file后,创建FileReader来读取内容。


<!DOCTYPE html>
<html lang="zh">
 
<head>
  <meta charset="UTF-8" />
  <title>FileReader</title>
</head>
 
<body>
  <div>
    <input type="file" name="file" multiple="multiple" id="files" onchange="choosefile()" />
    <div id="name"></div>
    <textarea id="text" cols="100" rows="50"></textarea>
  </div>
  <script type="text/javascript">
  function choosefile () {
    var fileList = document.getElementById('files').files;
    var nameStr = '';
    for (var i = 0; i < fileList.length; i++) {
        nameStr += `${i === 0 ? '' : ', '}${fileList[i].name}`;
        var reader = new FileReader();
        reader.readAsText(fileList[i], "UTF-8");
        reader.onload = function (e) {
            var content = e.target.result;
            console.log(content);
            const textAreaVal = document.getElementById('text').value;
            document.getElementById('text').value = textAreaVal + content;
        }
    }
    document.getElementById('name').append(nameStr);
  }
  </script>
</body>
 
</html>

html 内只能通过网络请求或者资源的形式加载外部内容。
text 是本地,还是网络资源?
本地的话,js 是不支持直接读去本地文件的,nodejs 有 fs 模块,不过 nodejs 不能在网页内运行;
你是要在 html 内显示 text 内的内容,需要讲 text 托管到文件服务上,例如 本地启动http-server, 或者直接放到 oss 文件存储管理上,会给你一个访问的链接,你通过 ajax ,xhr ,axios ,fetch 等方式请求,即可;本地也有对应的地址,一样是只能通过网络请求获取文本内容,和平时的请求是一样的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #content {
      display: block;
      width: 200px;
      height: 400px;
    }
  </style>
</head>
<body>
  <input type="file" onchange="changeFile(this)">
  <textarea id="content"></textarea>
  <script>
    function changeFile(obj) {
      const file = obj.files[0]
      const reader = new FileReader()
      const content = document.getElementById('content')

      reader.readAsText(file, 'utf-8')
      reader.onload = function() {
        content.innerHTML = reader.result
      }
      reader.onerror = function() {
        console.log(reader.error)
      }
    }
  </script>
</body>
</html>

为什么要用js读取文件直接显示呢?是合理的需求吗?

img

img


<!DOCTYPE html>
<html lang="zh">
<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>FileReader</title>
</head>
<body>
<input id="input" type="file">
</body>
<script>
  const input = document.querySelector('input[type=file]')
  input.addEventListener('change', ()=>{
    const reader = new FileReader()
    reader.readAsText(input.files[0],'utf8') // input.files[0]为第一个文件
    reader.onload = ()=>{
        var fs=reader.result.split("\n");
        var str ="";
        fs.forEach(item=>{
            str=str+"<br/>"+item;
        })
      document.body.innerHTML += str  // reader.result为获取结果
    }
  }, false)
  </script>
</html>
文章:使用JS快速读取TXT文件 中也许有你想要的答案,请看下吧