用JavaScript读取本地文件内容

随着JavaScript应用面的逐渐广泛。我们的js的要求也愈来愈高,现在我们可以用js做后端服务器(Node.js),做前端游戏模拟器(JS GameBoy Color Game Center),甚至有人用他模拟了一台pc,并且装上了linux(jslinux)在浏览器里跑。js总是给我们带来一个又一个惊喜。

随着HTML5的流行和逐渐普及,无数的好的接口也一个个的向我们走来,惊喜不断,以前一直被视为无法实现的js读取本地文件内容在现在也已经不再是什么难事了。你唯一需要关注的可能就是浏览器兼容性问题了。

今天要介绍的是使用js读取本地文件内容:

我们完全依赖FileReader类完成读取工作,你可以到w3c的网站查看相关的说明http://www.w3.org/TR/FileAPI/

然后我们需要使用到html的input标签的file类型元素


multiple=””用于设置控件为多选

下面是读取文件的代码

function read_files(fileArray){
    for(var i in fileArray){
        var file = fileArray[i]; //这个file对象有以下属性可供读取name、size、lastModifiedDate和type等。
        var reader = new FileReader();
        if(/text\/\w+/.test(file.type)) { //判断文本文件
            reader.onload = function() { //读取结束后触发onload事件
                $('
'+this.result+'

').appendTo('body'); } reader.readAsText(file);//readAsText函数用于将文件读取为文本 }else if(/image\/\w+/.test(file.type)) { //判断图片文件 reader.onload = function() { $('
').appendTo('body'); } reader.readAsDataURL(file);//readAsDataUrl函数用于将文件读取为Data url } } }

下面介绍一下FileReader对象:
他采用事件机制,以下为他的的一些可以注册的事件:
onabort:中断时触发
onerror:出错时触发
onload:文件成功读取完毕时触发
onloadend:文件读取完毕时触发,无论是否失败
onloadstart:文件开始读取时触发
onprogress:当文件读取时,周期性地触发

他有4个读取函数:
readAsArrayBuffer(file):将文件读取为ArrayBuffer。
readAsBinaryString(file):将文件读取为二进制字符串
readAsDataURL(file):将文件读取为Data URL
readAsText(file, [encoding]):将文件读取为文本,encoding缺省值为’UTF-8′

另外:
他的abort()方法可以停止读取文件

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*