首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >编程小知识之 JavaScript 文件读取

编程小知识之 JavaScript 文件读取

作者头像
用户2615200
发布2019-06-14 20:45:43
5560
发布2019-06-14 20:45:43
举报

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1446300

本文介绍了两种在 JavaScript 读取文件的方法

文件读取在当今的编程语言中应该算是一项比较 trivial 的工作了,语言的标准库一般都会帮助我们做好文件抽象与读写缓存,我们仅需要熟悉和运用相关的 API 即可.

但是 JavaScript 由于安全性的原因,一直以来都没有提供相关的文件读取接口,但有时我们确实需要读取本地文件内容,下面是两种可能的读取方法.

1. 使用 HTML5 中的 FileReader

HTML5 引入的 FileReader 可以帮助我们读取本地文件,但是有一个限制,就是我们不能直接使用文件路径的方式来访问文件,而是首先需要用户选择文件(通过文件选择或者拖动文件至网页等方式)

代码还是比较简单的,首先你需要在 html 文件中添加文件选择表单:

<input type="file" id="file-input" />
<div id="file-content" />

接着就可以在 JavaScript 中进行(用户选择的)文件读取了:

function readSingleFile(e) {
    // file from "file-input"
    var file = e.target.files[0];
    if (!file) {
      return;
    }
  
    // create FileReader
    var reader = new FileReader();
  
    // load callback
    reader.onload = function(e) {
      var contents = e.target.result;
    
      // process file contents here
      // ...
    
    };
  
    // do read
    reader.readAsText(file);
}

// add file input change listener
var fileInput = document.getElementById("file-input");
fileInput.addEventListener("change", readSingleFile, false);
2. 使用 XMLHttpRequest

XMLHttpRequest 一般用于实现 Ajax,通过他我们也可以实现本地文件的读取(但是有同源等限制),示例代码如下:

var contents = "";

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
        contents = xmlhttp.responseText;
        
        // process file contents here
        // ...
      
    }
};

// send read request
xmlhttp.open("GET","abc.txt",true);
xmlhttp.send();
更多资料
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年06月06日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 使用 HTML5 中的 FileReader
  • 2. 使用 XMLHttpRequest
  • 更多资料
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档