分享
三行代码  ›  专栏  ›  技术社区  ›  MADJACK911

读取一个.txt文件并将其输出到<p>HTML(使用JS)

  •  -2
  • MADJACK911  · 技术社区  · 1 周前

    不工作或不需要模块 ,但我不知道该怎么做 普通javascript 我真的需要帮助 .. 谢谢。(抱歉我的英语不好,我是法国人)

    我的剧本:(不太管用,只要读)

    <script type="text/javascript">
        
        var fso, ts,s;
    fso = new ActiveXObject("Scripting.FileSystemObject");
    f1 = fso.OpenTextFile("pub.txt", 1);
    s = ts.ReadLine();
    
    </script>
    
    4 回复  |  直到 1 周前
        1
  •  0
  •   VnoitKumar    1 周前

    试试这个!

    <input type="file" onchange="readFile(this)" />
    
    <script>
      function readFile(input) {
        let file = input.files[0];
    
        let reader = new FileReader();
    
        reader.readAsText(file);
    
        reader.onload = function () {
          document.getElementById("app").innerHTML = `<p>${reader.result}</p>`;
        };
    
        reader.onerror = function () {
          console.log(reader.error);
        };
      }
    </script>
    
        2
  •  1
  •   blacksheep    1 周前

    document.querySelector("input[type='file']").addEventListener("change", function(){
        if(this.files[0]){
          this.files[0].text()
            .then(val => {
              document.querySelector("p").textContent = val;
            })
        }
    })
    <label>Pick One Text File</label><br/>
    <input type="file" accept="text/plain" multiple="false"> <br/>
    
    <label>File Will Show up here in the text box</label><br/><br/>
    <p></p>
        3
  •  0
  •   5hifaT    1 周前

    fetch('file.txt')
      .then(response => response.text())
      .then(text => console.log(text))
      // outputs the content of the text file  
    

    使用Jquery:

    $("#div7").load("ajax.txt"); 
    
        4
  •  0
  •   Eslam Adel    1 周前

    编辑:这里是一个有效的例子 https://codepen.io/engeslamadell/pen/WNrVPeG

    你试过这个吗

    <script type="text/javascript"> 
    //this is the input with type file
        document.getElementById('inputfile') 
            .addEventListener('change', function() { 
              
            var fr=new FileReader(); 
            fr.onload=function(){ 
                document.getElementById('output') 
                        .textContent=fr.result; 
            } 
              
            fr.readAsText(this.files[0]); 
        }) 
    </script> 
    

    你也有这些 FileReader 方法 FileReader.readAsArrayBuffer() FileReader.readAsBinaryString() :读取指定输入文件的内容。result属性将文件中的原始二进制数据作为字符串包含。 FileReader.readAsDataURL() :读取指定输入文件的内容。result属性包含表示文件数据的URL。 FileReader.readAsText() :读取指定输入文件的内容。result属性以文本字符串的形式包含文件的内容。此方法可以将编码版本作为第二个参数(如果需要)。默认编码是UTF-8。

    https://www.geeksforgeeks.org/how-to-read-a-local-text-file-using-javascript/