JavaScript中读取和保存文件实例


Posted in Javascript onMay 08, 2014

话说今天只是粗略浏览了一下Proxy SwitchySharp的源码,就收获了不少东西,其中就包括本文要介绍的读取和保存文件。

因为Google还不提供同步插件数据的功能,所以导入和导出插件配置就必须和文件打交道了。而出于安全原因,只有IE才提供访问文件的API;但随着HTML 5的到来,其他浏览器也纷纷支持了。

首先说读取文件。W3C提供了一些File API,其中最重要的是FileReader这个类。

先列出需要用到的HTML标签:

<input type="file" id="file" onchange="handleFiles(this.files)"/>

当选择了一个文件时,就会把包含这个文件的列表(一个FileList对象)作为参数传给handleFiles()函数了。
这个FileList对象类似一个数组,可以知道文件的数目,而它的元素就是File对象了。
从这个File对象可以获取name、size、lastModifiedDate和type等属性。
把这个File对象传给FileReader对象的读取方法,就能读取文件了。

FileReader共有4种读取方法:
1.readAsArrayBuffer(file):将文件读取为ArrayBuffer。
2.readAsBinaryString(file):将文件读取为二进制字符串
3.readAsDataURL(file):将文件读取为Data URL
4.readAsText(file, [encoding]):将文件读取为文本,encoding缺省值为'UTF-8'
此外,abort()方法可以停止读取文件。

FileReader对象在读取文件后,还需要进行处理。为了不阻塞当前线程,API采用了事件模型,可以注册这些事件:
1.onabort:中断时触发
2.onerror:出错时触发
3.onload:文件成功读取完毕时触发
4.onloadend:文件读取完毕时触发,无论是否失败
5.onloadstart:文件开始读取时触发
6.onprogress:当文件读取时,周期性地触发

有了这些方法以后,就可以处理文件了。
先来试试读取文本文件:

function handleFiles(files) {
    if (files.length) {
        var file = files[0];
        var reader = new FileReader();
        if (/text\/\w+/.test(file.type)) {
            reader.onload = function() {
                $('<pre>' + this.result + '</pre>').appendTo('body');
            }
            reader.readAsText(file);
        }
    }
}

这里的this.result实际上就是reader.result,也就是读取出来的文件内容。
测试一下你会发现这个文件的内容被添加到网页中了。如果是用Chrome的话,必须把网页放在服务器上或插件里,file协议下会失败。

再来试试图片,因为浏览器可以直接显示Data URI协议的图片,所以这次就添加图片:

function handleFiles(files) {
    if (files.length) {
        var file = files[0];
        var reader = new FileReader();
        if (/text\/\w+/.test(file.type)) {
            reader.onload = function() {
                $('<pre>' + this.result + '</pre>').appendTo('body');
            }
            reader.readAsText(file);
        } else if(/image\/\w+/.test(file.type)) {
            reader.onload = function() {
                $('<img src="' + this.result + '"/>').appendTo('body');
            }
            reader.readAsDataURL(file);
        }
    }
}

其实input:file控件还支持选择多个文件:

<input type="file" id="files" multiple="" onchange="handleFiles(this.files)"/>

这样handleFiles()里就需要遍历处理files了。

如果只想读取部分数据的话,File对象还有webkitSlice()或mozSlice()方法,用于生成Blob对象。这个对象可以和File对象一样被FileReader读取。这2个方法接收3个参数:第1个参数是起始位置;第2个是结束位置,省略时则读到文件结尾;第3个是content type。
例子可以参考《Reading local files in JavaScript》。

当然,除了导入数据和显示文件以外,它还可以用来做AJAX上传,代码可以参考《Using files from web applications》。

接下来说保存文件。
实际上File API: Writer提供了4个接口,但目前只有部分浏览器(Chrome 8+和Firefox 4+)实现了BlobBuilder,其余接口都不可用。
对于不支持的浏览器,可以使用BlobBuilder.js和FileSaver.js来获得支持。
我研究了一下,发现了其中的奥秘。

BlobBuilder可以创建一个Blob对象。把这个Blob对象传递给URL.createObjectURL()方法,就可以拿到一个object URL。而这个object URL就是这个Blob对象的下载地址。
拿到下载地址后,创建一个a元素,将下载地址赋值给href属性,文件名赋值给download属性(Chrome 14+支持)。
然后再创建一个click事件,交给这个a元素处理,就会导致浏览器开始下载这个Blob对象了。
最后,用URL.revokeObjectURL()来释放这个object URL,通知浏览器可以不必继续引用这个文件了。

下面就是一段化简的代码:

var BlobBuilder = BlobBuilder || WebKitBlobBuilder || MozBlobBuilder;
var URL = URL || webkitURL || window;
function saveAs(blob, filename) {
    var type = blob.type;
    var force_saveable_type = 'application/octet-stream';
    if (type && type != force_saveable_type) { // 强制下载,而非在浏览器中打开
        var slice = blob.slice || blob.webkitSlice || blob.mozSlice;
        blob = slice.call(blob, 0, blob.size, force_saveable_type);
    }
    var url = URL.createObjectURL(blob);
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = url;
    save_link.download = filename;
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
    URL.revokeObjectURL(url);
}
var bb = new BlobBuilder;
bb.append('Hello, world!');
saveAs(bb.getBlob('text/plain;charset=utf-8'), 'hello world.txt');

测试时会提示保存一个文本文件。Chrome需要把网页放在服务器上或插件里。

Javascript 相关文章推荐
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
Javascript缓存API
Jun 14 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 #Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 #Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 #Javascript
addEventListener 的用法示例介绍
May 07 #Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 #Javascript
关闭时刷新父窗口两种方法
May 07 #Javascript
js获取下拉列表的值和元素个数示例
May 07 #Javascript
You might like
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
python计算一个序列的平均值的方法
2015/07/11 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
别名指示符是什么
2012/10/08 面试题
产品陈列协议书(标准版)
2014/09/17 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
2016国庆促销广告语
2016/01/28 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
Python编程编写完善的命令行工具
2021/09/15 Python