编程小知识之 JavaScript 文件读取

编程小知识之 文件读取
本文介绍了两种在 读取文件的方法

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

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

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

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

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

function readSingleFile(e) {

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

}

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

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

var contents = "";

var http = new HttpRequest();
http. = function() {

if ( http.status == 200 &&  http.readyState == 4) {    contents =  http.responseText;        // process file contents here    // ...  }

};

// send read request
http.open("GET","abc.txt",true);
http.send();

更多资料
http://researchhubs.com/post/computing/ /open-a-local-file-with- .html
https://www.html5rocks.com/en/tutorials/file/dndfiles/

https://www.liaoxuefeng.com/wiki/1022910821149312/1023022332902400

作者：tkokof1
来源：CSDN
原文：https://blog.csdn.net/tkokof1/article/details/91050003
版权声明：本文为博主原创文章，转载请附上博文链接！