HTML5来实现本地文件读取和写入的实现方法


Posted in HTML / CSS onMay 25, 2021

最近有这样一个需求,就是在html页面中有个按钮导出,点击它,将构造一个文档并存储到本地文件系统中。另外还有个按钮,点击它,从本地文件系统中读取一个文件并对内容进行分析。

说白了,就是一件事,就是如何读取或写入本地文件系统中的文件。

这件事情在html5以前是一件非常恐怖的,因为浏览器对本地文件系统有非常强的保护,似乎是一种叫做沙盒的机制,总之是,js不可以直接操作它。所以,这个时候,要想读某个文件,就需要将文件上传到服务器,然后服务器读取并解析这个文件,并将解析结果返回客户端。写一个文件,就稍微简单些,js没办法写,所以只能是服务器动态生成一个文件,并以下载的方式来下载它(attachment)。但是这样其实是很不合理的。因为要操作这个文件的是js引擎,但是中间还需要通过一个服务器。

html5来了它提供了一套文件系统的API,可以实现文件读写,我很好奇,这个需求可能是很常见的,但是网上却很少有Demo.所以,自己整理了一下。

文件读取

文件读取要利用到的API是FileReader,在html中的元素为:

<div>
    <input type="file" id="files" style="display:none" onchange="import();"/>
    <input type="button" id="import" value="导入"/>
</div>

 html中元素就这么简单,首先需要一个file类型的input元素,这里为啥要display:none呢?因为这个东西太丑了

js代码:

$("#import").click(function(){//点击导入按钮,使files触发点击事件,然后完成读取文件的操作。
        $("#files").click();
    });
 
function import(){
    var selectedFile = document.getElementById("files").files[0];//获取读取的File对象
    var name = selectedFile.name;//读取选中文件的文件名
    var size = selectedFile.size;//读取选中文件的大小
    console.log("文件名:"+name+"大小:"+size);
 
    var reader = new FileReader();//这里是核心!!!读取操作就是由它完成的。
    reader.readAsText(selectedFile);//读取文件的内容
 
    reader.onload = function(){
        console.log(this.result);//当读取完成之后会回调这个函数,然后此时文件的内容存储到了result中。直接操作即可。
    };
}

这样,读取本地文件的操作就完成了。有些网友说什么使用ActiveXObject的什么的,这个只有在IE中才能使用,但是现在连微软都放弃了IE,所以,不要这样使用。

写入文件

写入文件稍微复杂了一些,虽然在html5中与FileReader相对应的也有一个FileWriter,但是这个东西用起来实在是不爽,至少我查了大半天,没有找到一个可以用的API,此外,FileReader可以被Chrome、FF和Safari都支持。当然了,要求一定版本以上的。 但是FileWriter似乎只有被Chrome支持。不管了,能用就好。

//首先导入一个js文件
<script type="text/JavaScript" src="./js/FileSaver.js" charset="utf-8"></script>
//html中添加一个导出元素 
<input type="button" id="export" value="导出"/>
//js文件
$("#export).click(function(){
    var content = "这是直接使用html5进行导出的";
    var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
    saveAs(blob, "file.txt");//saveAs(blob,filename)
});

到此这篇关于HTML5来实现本地文件读取和写入的实现方法的文章就介绍到这了,更多相关HTML5本地文件读取写入内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!  

 
HTML / CSS 相关文章推荐
css动画效果之animation的常用样式
Mar 09 HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
css3弹性盒模型实例介绍
May 27 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
CSS3新特性详解(五):多列columns column-count和flex布局
Apr 30 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 HTML / CSS
详解CSS不受控制的position fixed
May 25 #HTML / CSS
详解CSS伪元素的妙用单标签之美
浅谈由position属性引申的css进阶讨论
详解CSS玩转图片Base64编码
详解CSS不定宽溢出文本适配滚动
May 24 #HTML / CSS
如何在CSS中绘制曲线图形及展示动画
详解盒子端CSS动画性能提升
You might like
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
PHP的PDO连接讲解
2019/01/24 PHP
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
Python实现简单的四则运算计算器
2016/11/02 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
python实现泊松图像融合
2018/07/26 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
意大利男装网店:Vrients
2019/05/02 全球购物
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
我的小天地教学反思
2014/04/30 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
酒桌上的开场白
2015/06/01 职场文书
单位接收证明格式
2015/06/18 职场文书