純前端 讀取本地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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM