纯前端读取本地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>

朋友，看到这里，用支付宝扫码领个红包吧！实体店付款可以优惠哦！

请认准【http://wuhairui.cnblogs.com/】

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

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