正文
前端使用js读取文件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
最近同事问我js能不能读取本地文件；
想起以前看到js读取本地文件的文章，然后自己写了个demo。
ps:这有点像Java的IO流，但是又有差别。
首先我们定义一个input标签type="file"
jsReadFile:<input type="file" onchange="jsReadFiles(this.files)"/>
然后我们定义一个jsReadFiles的方法将文件作为参数；当上传文件的时候读取这个文件
//js 读取文件
function jsReadFiles(files) {
if (files.length) {
var file = files[0];
var reader = new FileReader();//new一个FileReader实例
if (/text+/.test(file.type)) {//判断文件类型，是不是text类型
reader.onload = function() {
$('body').append('<pre>' + this.result + '</pre>');
}
reader.readAsText(file);
} else if(/image+/.test(file.type)) {//判断文件是不是imgage类型
reader.onload = function() {
$('body').append('<img src="' + this.result + '"/>');
}
reader.readAsDataURL(file);
}
}
}
这里用到了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');
}
成功读取文件：
图片上传成功，只是图片路径变成了base64编码的形式。
顺便唠叨一下base64编码的优缺点：
优点：
1.减少了http请求。
2.没有跨域的问题。
3.直接放在路径里不需要清理缓存。
缺点：
1.IE6/7不支持(不过这个问题不大)；
2.base64本质上是将图片以二进制的字母展示，字符量过大无形中增加了css/html文件的大小；
以上就是js读取文件的样例，有不对的地方欢迎大家吐槽！
