前端使用js读取文件

淡淡的烟草味﹌ 2022-01-05 06:05 242阅读 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     }

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

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

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

相关事件：

onabort 中断  
onerror 出错  
onloadstart 　 开始  
onprogress 正在读取  
onload 成功读取  
onloadend 读取完成，无论成功失败

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果。

如果读取文件过大的话fileReader允许分段读取文件；

var blob_file;
    if(file.webkitSlice) {  //chrome
            blob_file= file.webkitSlice(start, end + 1, 'text/plain;charset=UTF-8');
    } else if(file.mozSlice) { //Firefox
            blob_file= file.mozSlice(start, end + 1, 'text/plain;charset=UTF-8');
    }

### 成功读取文件： ###

![850786-20160925210453190-329845689.png][]

![850786-20160925210732763-915328137.png][]

图片上传成功，只是图片路径变成了base64编码的形式。

#### 顺便唠叨一下base64编码的优缺点： ####

优点：

1.减少了http请求。

2.没有跨域的问题。

3.直接放在路径里不需要清理缓存。

缺点：

1.IE6/7不支持(不过这个问题不大)；

2.base64本质上是将图片以二进制的字母展示，字符量过大无形中增加了css/html文件的大小；

以上就是js读取文件的样例，有不对的地方欢迎大家吐槽！

转载于:https://www.cnblogs.com/leungUwah/p/5907005.html

[850786-20160925210453190-329845689.png]: /images/20211229/01b988faa67845298d7012fd8e9c9f4b.png
[850786-20160925210732763-915328137.png]: /images/20211229/a2d1fde88b6f4ed59271b4ff135432bd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，242人围观）

还没有评论，来说两句吧...

相关阅读

相关前端使用js读取文件

近同事问我js能不能读取本地文件；想起以前看到js读取本地文件的文章，然后自己写了个demo。 ps:这有点像Java的IO流，但是又有差别。首先我们定...

╰半橙微兮°/ 2024年04月18日 08:03/ 0 赞/ 12 阅读

相关 node.js文件系统之文件读取

初学node.js时，我们首先接触的就是文件的读写使用node.js读取文件时，最重要的是使用fs.[readFile][]()方法，格式为： fs.readFi

素颜马尾好姑娘i/ 2024年03月30日 14:01/ 0 赞/ 11 阅读

相关 node.js读取JSON文件

代码如下： let path = "./plays.json"; let fs = require('fs'); let plays = JSON.p

谁借莪１个温暖的怀抱￠/ 2022年12月19日 09:02/ 0 赞/ 89 阅读

相关使用input读取文件

读取一个包含文本内容的文件，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta char

小灰灰/ 2022年06月12日 04:44/ 0 赞/ 192 阅读

相关 JS-读取txt文件内容

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

末蓝、/ 2022年05月13日 01:12/ 1 赞/ 350 阅读

相关使用js-xlsx库，前端读取Excel报表文件

在实际开发中，经常会遇到导入Excel文件的需求，有的产品人想法更多，想要在前端直接判断文件内容格式是否正确，必填项是否已填写依据HTML5的FileReader，可以使用

た入场券/ 2022年03月29日 03:46/ 0 赞/ 324 阅读

相关使用Stream读取文件

Java8 以后的新特性比较好用，可以极大的简化代码，今天我们就一起来学习下如何使用新特性来读取文件的内容 / 这里使用到了 nio中的Path nio是一种高

「爱情、让人受尽委屈。」/ 2022年03月18日 13:08/ 0 赞/ 248 阅读

相关 js读取xml文件

假设我们现在要读取下面的 info.xml 文件 <?xml version="1.0" encoding="gb2312"?> <root> <d

亦凉/ 2022年02月13日 17:11/ 0 赞/ 232 阅读

相关如何使用JavaScript实现纯前端读取和导出excel文件

[https://www.cnblogs.com/liuxianan/p/js-excel.html][https_www.cnblogs.com_liuxianan_p_js

分手后的思念是犯贱/ 2022年02月03日 03:29/ 0 赞/ 168 阅读

相关前端使用js读取文件

最近同事问我js能不能读取本地文件；想起以前看到js读取本地文件的文章，然后自己写了个demo。 ps:这有点像Java的IO流，但是又有差别。首先我们定义一个in

淡淡的烟草味﹌/ 2022年01月05日 06:05/ 0 赞/ 243 阅读