如何使用 JavaScript 读取本地文本文件？

HTML 5 在File API的帮助下提供了一种与本地文件交互的标准方式。 File API 允许与单个、多个以及 BLOB 文件进行交互。 FileReader API可用于与 JavaScript 事件处理协作以异步方式读取文件。但是，并非所有浏览器都支持 HTML 5，因此在使用 File API 之前测试浏览器兼容性很重要。 FileReader API 中有四种内置方法可以读取本地文件：

• FileReader.readAsArrayBuffer()：读取指定输入文件的内容。 result 属性包含一个表示文件数据的 ArrayBuffer。
• FileReader.readAsBinaryString()：读取指定输入文件的内容。 result 属性包含来自文件的原始二进制数据作为字符串。
• FileReader.readAsDataURL()：读取指定输入文件的内容。 result 属性包含一个表示文件数据的 URL。
• FileReader.readAsText()：读取指定输入文件的内容。 result 属性包含作为文本字符串的文件内容。此方法可以将编码版本作为第二个参数（如果需要）。默认编码为 UTF-8。

在这种情况下，我们使用 FileReader.readAsText() 方法来读取本地.txt 文件。

  

    Read Text 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]);
        })
    

  

此代码打印输入文件的内容与输入文件中的内容完全相同。

JavaScript 以网页开发而闻名，但它也用于各种非浏览器环境。您可以按照这个 JavaScript 教程和 JavaScript 示例从头开始学习 JavaScript。