前端使用js读取文件

时间：2016-09-25 22:08:58 阅读：1551 评论：0 收藏：0 [点我收藏+]

标签：

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

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

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

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

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

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

 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     }