纯前端 读取本地txt文件并展示

功能展示：可以读取。

 

代码： 

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <div>
    上传文件 ： <br>
    <input type="file" name="file" multiple id="fileId" />
    <br><br>
    <button type="submit" name="btn" value="提交" id="btnId" onclick="check()">提交</button>
    <br>
    <textarea id="text" name="" id="" cols="100" rows="50"></textarea>
  </div>
  <script type="text/javascript">
    function check() {
      var objFile = document.getElementById("fileId");
      if (objFile.value == "") {
        alert("不能空")
      }
      var files = $('#fileId').prop('files'); //获取到文件列表
      console.log(files.length);
      if (files.length == 0) {
        alert('请选择文件');
      } else {
        for (var i = 0; f = files[i]; i++) {
          var reader = new FileReader(); //新建一个FileReader
          reader.readAsText(files[i], "UTF-8"); //读取文件
          reader.onload = function (evt) { //读取完文件之后会回来这里
            var fileString = evt.target.result; // 读取文件内容
            console.log(fileString)
            $('#text').val(fileString)
          }
        }
      }
    }
  </script>
</body>

</html>

 

posted @ 2021-09-08 18:48  herry菌  阅读(2665)  评论(0)  编辑  收藏  举报