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中的calc函数浅析
Jul 10 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
Html5 localStorage入门教程
Apr 26 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
详解HTML5中download属性的应用
Aug 06 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 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中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
Python中使用ElementTree解析XML示例
2015/06/02 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
python中使用while循环的实例
2019/08/05 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
教你打造完美的创业计划书
2014/01/06 职场文书
节约电力资源的建议书
2014/03/12 职场文书
征婚广告词
2014/03/17 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
幼师大班个人总结
2015/02/13 职场文书
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS