zoukankan html css js c++ java

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

查看全文

相关阅读:
第八周进度条
 对老师的评价
 构建之法阅读笔记03
构建之法阅读笔记02
第七周进度条
 团队冲刺第二周07
团队冲刺第二周06
Java jdbc 连接oracle
Java 生成验证码
 Oracle 触发器的简单命令

原文地址：https://www.cnblogs.com/wuhairui/p/15244143.html

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

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