关闭

HTML5实现文件读取、编辑、保存

时间: 2018-10-06阅读: 1368标签: 文件

html5读取文件

html5读取文件主要利用的就是FileReader这个API,它的使用需要从一个构造函数开始:

var reader = new FileReader();      // 返回一个FileReader实例

返回的实例具有以下3个属性:

  • FileReader.result
  • FileReader.readyState
  • FileReader.error

其中result属性是文件读取成功后的读取结果,数据的格式取决于使用哪个方法来启动读取操作。

FileReader实例具有以下4个方法:

  • FileReader.readAsText()
  • FileReader.readAsDataURL()
  • FileReader.readAsArrayBuffer()
  • FileReader.abort()

前3个方法分别是以文本、图片、其他格式读取内容,读取的对象可以是BolbFile,在读取本地文件的场景下,我们读取的实际上就是File。

reader.readAsText(file);    //读取文本文件

FileReader.abort()方法不需要说了,就是中断文件读取。

同时FileReader实例具有以下6个事件:

  • FileReader.onprogress
  • FileReader.onloadend
  • FileReader.onloadstart
  • FileReader.onload
  • FileReader.onerror
  • FileReader.onabort

其中onload事件是我们最关心的一个,该事件将在读取操作完成时触发,在这个事件中我们才能访问到FileReader.result属性,得到读取结果。

reader.onload = function() {
    console.log(this.result);       //文本内容
};

使用FileReader读取文件的整个流程就是这样,File对象我们可以通过<input type="file" >获取。


HTML5保存文件

保存文件的关键是生成文件对象,可以使用URL.createObjectURL()方法实现,该方法能返回给定对象的URL,用在<a>标签的href属性上就可以创建可下载的文件链接。

let DownloadDom = document.getElementById("Download");      // a标签
DownloadDom.href = window.URL.createObjectURL(myBlob);      // 生成下载链接


createObjectURL()方法的参数可以是File对象或者Blob对象,前端保存文件通常是希望将已有“内容”保存成文件,这种场景我们需要的是Blob对象。

Blob构造函数可以根据传入的数组数据返回Blob对象,数组可以是ArrayBuffer、ArrayBufferView、Blob、DOMString,假如我们希望将一段jsON字符串保存成jsON文件,那么可以这么做:

let myBlob = new Blob(['{"hello":"world"}'], { type: "application/json" });     //Blob对象


关于Blob构造函数的详细用法可以从这里了解。

有了createObjectURL和Blob,实际上,我们就可以封装一个方法,将任意字符串保存成文件,并点击链接下载:

let 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文件压缩,实际上就是拿到文本内容后,对内容过滤空字符:

let fileText = reader.result;
fileText.replace(/\s/g, "");
saveFile(fileText)


再补充一点内容,createObjectURL()方法还有一个对应的URL.revokeObjectURL()方法,用来释放生成的URL对象,用法是这样的:

var 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实现文件读取、编辑、保存/


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1123

关闭

lock文件_我们为什么需要 lock 文件

从 Yarn 横空出世推出 lock 文件以来,已经两年多时间了,npm 也在 5.0 版本加入了类似的功能,lock 文件越来越被开发者们接收和认可。本篇文章想从前端视角探讨一下我们为什么需要 lock 文件,以及它的一些成本与风险,当然其中一些观点对于后端也是适用的

nodejs如何调用其他的js文件内容?

将其他js文件与nodejs文件放在同一目录下,然后在nodejs文件中使用require(\\\'js文件路径\\\');将其他js文件引入到nodejs文件中,就可以直接调用其他js文件内容了。

vue 查看dist文件里的结构

优化打包后的代码,提高性能。方式一:report-json。package.json文件里加入以下命令,然后控制台运行 npm run report结果:会在dist文件夹里生成 report.json。里面有打包后每个文件的来源。

CSS文件里引入另一个CSS文件

在HTML中引入css的其中的两个方法:使用链接式、使用导入式;使用链接式时,会在装载页面主体部分 之前装载css文件,这样现实出来的页面从一开始就是带有样式效果的

原生JS使用Blob导出csv文件

最近在做关于文件下载的需求:前端调用接口,然后对返回数据进行过滤、格式化,然后按表格内容拼接生成csv文件,让用户下载。数据中存在 ‘,‘ 逗号问题处理:将整个数据用双引号(英文格式)包裹起来,这样会显示成一个单元格。

js和css文件位置对页面性能有什么影响?

js脚本应该放在底部,原因在于js线程与GUI渲染线程是互斥的关系,如果js放在首部,当下载执行js的时候,会影响渲染行程绘制页面,js的作用主要是处理交互,而交互必须得先让页面呈现才能进行,所以为了保证用户体验,尽量让页面先绘制出来

微信小程序实现pdf,word等格式文件上传

目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的path地址,文件名,文件的大小等.获取这些信息再结合微信的上传接口wx.uploadFile,即可实现文件上传.

JavaScript 如何读取本地文件

出于安全和隐私的原因,web应用程序不能直接访问用户设备上的文件。如果需要读取一个或多个本地文件,可以通过使用input file和FileReader来实现。在这篇文章中,我们将通过一些例子来看看它是如何工作的。

基于Node的Axure文件在线预览

公司现在的产品Axure文档在生成好Html文件之后,都是通过git来进行管理的,每次文件更新,大家都需要从git上进行拉取,然后在本地查看,更新会出现不及时的问题,大家有时候忘记git拉取导致出现实现效果与最终产品稿不一致

form表单文件上传_multipart/form-data文件上传

form表单的enctype属性:规定了form表单数据在发送到服务器时候的编码方式.。application/x-www-form-urlencoded:默认编码方式,multipart/form-data:指定传输数据为二进制数据,例如图片、mp3、文件,text/plain:纯文本的传输。空格转换为“+”,但不支持特殊字符编码。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!