首页 > 代码库 > 前端使用js读取文件
前端使用js读取文件
最近同时问我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="http://www.mamicode.com/‘ + this.result + ‘"/>‘);14 }15 reader.readAsDataURL(file);16 }17 }18 }
这里用到了html5的FileReader这个对象来完成；
成功读取文件：
图片上传成功，只是图片路径变成了base64编码的形式。
顺便唠叨一下base64编码的优缺点：
优点：
1.减少了http请求。
2.没有跨域的问题。
3.直接放在路径里不需要清理缓存。
缺点：
1.IE6/7不支持(不过这个问题不大)；
2.base64本质上是将图片以二进制的字母展示，字符量过大无形中增加了css/html文件的大小；
以上就是js读取文件的样例，有不对的地方欢迎大家吐槽！
前端使用js读取文件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。