html如何读取本地文件,html写文件到本地

　　最近有一个需求，html页面里有一个导出的按钮。单击它将构造一个文档，并将其存储在本地文件系统中。还有一个按钮，点击它可以从本地文件系统中读取一个文件并分析其内容。

　　说白了就是一件事，就是如何在本地文件系统中读写文件。

　　这在html5之前是很可怕的事情，因为浏览器对本地文件系统有非常强的保护，好像是一种叫沙箱的机制。总之js不能直接操作。所以，这个时候如果要读取一个文件，需要将文件上传到服务器，然后服务器读取并解析文件，将解析结果返回给客户端。写文件稍微容易一点。js写不出来，服务器只能动态生成一个文件，作为附件下载。但这其实很不合理。因为操作这个文件的是js引擎，但是中间有一个服务器。

　　Html5来了。它为文件系统提供了一套API，可以读写文件。我很好奇。这个需求可能很普遍，但是网上很少有Demo。所以，我自己整理了一下。

文件读取

　　用于文件读取的API是FileReader，html中的元素是：

　　 div input type= file id= files style= display:none onchange= import()；/input type= button id= import value= import ///div html中的元素就是这么简单。首先，您需要一个文件类型的输入元素。为什么要显示：此处无？因为这东西太丑了。

　　Js代码：

　　$ (# import )。Click(function(){//点击导入按钮，使文件触发Click事件，然后完成读取文件的操作。$(#files )。单击()；});function import(){ var selected file=document . getelementbyid( files )。文件[0]；//获取读取文件对象var name=selectedFile.name//读取选中文件的文件名var size=selectedFile.size//读取所选文件的大小console.log(文件名：名称大小：大小)；var reader=new FileReader()；//这里是核心！读取操作由它来完成。reader . readas text(selected file)；//读取文件reader . onload=function(){ console . log(this . result)的内容；//这个函数在读取结束的时候会被回调，然后这个时候文件的内容会存储在结果中。直接做就是了。};}这样，读取本地文件的操作就完成了。有网友说什么用ActiveXObject，只能在IE里面用，但是现在连微软都放弃IE了，不要这样用。

写入文件

　　写文件稍微复杂一点。虽然html5中也有FileReader对应的FileWriter，但是这个东西用起来确实不舒服。至少我查了半天也没找到可用的API。此外，Chrome、FF和Safari都可以支持FileReader。当然需要一定版本以上。但是FileWriter似乎只有Chrome支持。不管怎样，只要有用。

　　//首先导入一个js文件脚本type= text/JavaScript src=。/Js/file saver . Js charset= UTF-8 /script//HTML并添加一个导出元素input type= button id= export value= export //Js file $( # export)。Click (function () {var content=这是用html5直接导出的)；var blob=new Blob([content]，{ type: text/plain；charset=utf-8 })；saveAs(blob， file . txt )；//saveAs(blob，文件名)})；关于HTML5读写本地文件的实现方法这篇文章到此为止。关于HTML5读写本地文件的更多信息，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。