HTML5实现文件读取、编辑、保存 | 您所在的位置:网站首页 › 战夙寒宝最后的结果 › HTML5实现文件读取、编辑、保存 |
最近自己捣鼓了一个好玩的项目觅迹导航,核心功能已经开发完成,后续会抽时间完善一下细节,并开放使用。做这个项目的过程中涉及到本地文件的读写,而且项目的定位不涉及兼容性问题,所以就直接用HTML5实现了,这里将实现过程以及涉及到的知识点整理一下。 HTML5读取文件HTML5读取文件主要利用的就是FileReader这个API,它的使用需要从一个构造函数开始: 12var reader = new FileReader(); // 返回一个FileReader实例返回的实例具有以下3个属性: FileReader.result FileReader.readyState FileReader.error其中result属性是文件读取成功后的读取结果,数据的格式取决于使用哪个方法来启动读取操作。 FileReader实例具有以下4个方法: FileReader.readAsText() FileReader.readAsDataURL() FileReader.readAsArrayBuffer() FileReader.abort()前3个方法分别是以文本、图片、其他格式读取内容,读取的对象可以是Bolb或File,在读取本地文件的场景下,我们读取的实际上就是File。 12reader.readAsText(file); //读取文本文件FileReader.abort()方法不需要说了,就是中断文件读取。 同时FileReader实例具有以下6个事件: FileReader.onprogress FileReader.onloadend FileReader.onloadstart FileReader.onload FileReader.onerror FileReader.onabort其中onload事件是我们最关心的一个,该事件将在读取操作完成时触发,在这个事件中我们才能访问到FileReader.result属性,得到读取结果。 123reader.onload = function() { console.log(this.result); //文本内容};使用FileReader读取文件的整个流程就是这样,File对象我们可以通过获取。 HTML5保存文件保存文件的关键是生成文件对象,可以使用URL.createObjectURL()方法实现,该方法能返回给定对象的URL,用在标签的href属性上就可以创建可下载的文件链接。 123let DownloadDom = document.getElementById("Download"); // a标签DownloadDom.href = window.URL.createObjectURL(myBlob); // 生成下载链接createObjectURL()方法的参数可以是File对象或者Blob对象,前端保存文件通常是希望将已有“内容”保存成文件,这种场景我们需要的是Blob对象。 Blob构造函数可以根据传入的数组数据返回Blob对象,数组可以是ArrayBuffer、ArrayBufferView、Blob、DOMString,假如我们希望将一段JSON字符串保存成JSON文件,那么可以这么做: 12let myBlob = new Blob(['{"hello":"world"}'], { type: "application/json" }); //Blob对象关于Blob构造函数的详细用法可以从这里了解。 有了createObjectURL和Blob,实际上,我们就可以封装一个方法,将任意字符串保存成文件,并点击链接下载: 12345678let saveFile = function(fileText) { let DownloadDom = document.getElementById("Download"); if (this.DownloadDom) { let myBlob = new Blob([fileText], { type: "application/json" }); this.DownloadDom.href = window.URL.createObjectURL(myBlob); console.log('下载文件已就绪') }},结合HTML5读取文本文件功能,我们还可以实现对文本文件的编辑功能,比如JSON文件压缩,实际上就是拿到文本内容后,对内容过滤空字符: 123let fileText = reader.result;fileText.replace(/\s/g, "");saveFile(fileText)再补充一点内容,createObjectURL()方法还有一个对应的URL.revokeObjectURL()方法,用来释放生成的URL对象,用法是这样的: 1234var obj_url = window.URL.createObjectURL(blob);var iframe = document.getElementById('viewer');iframe.setAttribute('src', obj_url);window.URL.revokeObjectURL(obj_url);当obj_url已经赋值给图片之后,就可以释放这个URL对象。这里的关键在于确定URL对象已经使用完了,在我们的例子中如果也这么做,实际上是不行的,当用户点击下载链接的时候会提示网络错误,因为href指向的链接已经失效了。猜测原因是,图片加载并显示的时候已经将数据载入内存了,这时候释放URL不会影响到图片的显示;而链接地址属于“引用”,点击瞬间会去访问URL对象,如果这时候对象已经释放了就会导致链接失效。 小结HTML5实现文件读取、编辑、保存其实非常简单,只不过涉及到的API兼容性都比较堪忧,以上示例仅在chrome里测试过。 完整的示例代码地址:https://github.com/tower1229/htm5-file-operations 演示地址:https://refined-x.com/htm5-file-operations/ 前端路上原创技术文章,转载请注明出处:https://refined-x.com/2018/09/03/HTML5实现文件读取、编辑、保存/ 不甘平庸的你,快来跟我一起充电吧,关注看风景,获取更多精彩内容。 |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |