前端使用js读取文件

╰半橙微兮° 2024-04-18 08:03 60阅读 0赞

最近同事问我js能不能读取本地文件；

想起以前看到js读取本地文件的文章，然后自己写了个demo。

ps:这有点像Java的IO流，但是又有差别。

### 首先我们定义一个input标签type="file" ###

1 jsReadFile:<input type="file" οnchange="jsReadFiles(this.files)"/>

### 然后我们定义一个jsReadFiles的方法将文件作为参数；当上传文件的时候读取这个文件 ###

![复制代码][copycode.gif]

1 //js 读取文件
     2     function jsReadFiles(files) {
     3         if (files.length) {
     4             var file = files[0];
     5             var reader = new FileReader();//new一个FileReader实例
     6             if (/text+/.test(file.type)) {//判断文件类型，是不是text类型
     7                 reader.onload = function() {
     8                     $('body').append('<pre>' + this.result + '</pre>');
     9                 }
    10                 reader.readAsText(file);
    11             } else if(/image+/.test(file.type)) {//判断文件是不是imgage类型
    12                 reader.onload = function() {
    13                     $('body').append('<img src="' + this.result + '"/>');
    14                 }
    15                 reader.readAsDataURL(file);
    16             }
    17         }
    18     }

![复制代码][copycode.gif]

这里用到了html5的FileReader这个对象来完成；

## **FileReader接口的方法：** ##

**readAsBinaryString                   　　  file                                                      将文件读取为二进制编码  
readAsText                                 　　 file,\[encoding\]                                   将文件读取为文本，其中第二个参数是文本的编码方式，默认值为 UTF-8  
readAsDataURL                                 file                                                      将文件读取为DataURL  
abort                                              　(none)                                                 中断读取操作(无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中)**