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 相关文章推荐
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
css height属性中的calc方法详解
Jun 03 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
详解CSS不受控制的position fixed
May 25 #HTML / CSS
详解CSS伪元素的妙用单标签之美
浅谈由position属性引申的css进阶讨论
详解CSS玩转图片Base64编码
详解CSS不定宽溢出文本适配滚动
May 24 #HTML / CSS
如何在CSS中绘制曲线图形及展示动画
详解盒子端CSS动画性能提升
You might like
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
入团者的自我评价分享
2013/12/02 职场文书
迟到检讨书1000字
2014/01/15 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
安全教育第一课观后感
2015/06/17 职场文书
辩论赛新闻稿
2015/07/17 职场文书
财产分割协议书
2016/03/22 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫