Html5 FileReader 对文件进行Base64编码

以Base64进行编码的数据Url开始越来越广泛的被应用起来,原来做Base64转换要自己写一个小程序来转,其实Html5的FileReader的readAsDataURL方法读取出的数据就已经是Base64数据格式的Url了,利用FileReader实现一个对本地文件进行读取并且转换为Base64 Url的页面也非常简单。

页面地址: http://zhangsichu.com/html5/filereader/base64dataurl.htm

最近IPhone比较火,这里用IPhone做了一个背景,选取一个本地文件,拖拽到那个IPhone上面的拖拽区域,下面就会得到对应的Base64 Url 编码。在Chrome和FireFox下通过测试可以正常工作,在大文件测试下Chrome要比FireFox快一些。

在例子中的那个IPhone背景图片就使用了data Url.在实际应用中对于过大文件进行Base64编码的意义其实不是很大,自己测试的结果是,一般编码后整体结果会增大1/3。

Base64Url 具体介绍 http://en.wikipedia.org/wiki/Data_URI_scheme

它的优点和缺点,上面的wiki页面已分析的非常清晰了,其中有一条是:It is possible to manage a multimedia page as a single file.

根据Base64 data URI scheme:

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

可以看到MIME-type中支持多种type,记得IE中有一个功能是把一个网页保存成一个.mht文件,all in one 所有的外链资源和页面都保存在一起,只保存成一个文件,这样用户在离线状态下也可以完整的浏览这个页面,FireFox 和 Chrome 没有类似的功能,它们保存整个页面时新建一个和网页同名的文件夹,把外部链接资源都保存到这个文件夹中,同时修改保存页面中链接的位置到这个新建的文件夹。根据data Url格式,应该在 FireFox和Chrome下实现这种保存网页all in one,只保存成一个文件的功能也不会太难了,完全可以根据data Url的格式,将外部链接资源编码成base64 Url然后替换原始的Url保存成一个单独的Html文件。在FireFox 和Chrome的最新版本中还没有这个功能,是否在未来的版本中会加入这个功能,我想他们应该会吧,这种all in one单页面的保存方式方便的将多个资源保存在一个文件里了,说不定已经有了这种FireFox插件,不过我还没有找到。

Html5 的FileReader 中除了readAsDataURL 还有好几个其它的文件读取方法: readAsBinaryString() readAsText() readAsArrayBuffer()

Html5 FileRead 更多信息: http://www.w3.org/TR/FileAPI/#FileReader-interface

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我是攻城师

Solr竞价排名之ExternalFileField使用

31390
来自专栏解决发现

CPU占用率100%的解决方法

图:优化前(我的电脑是四核cpu,所以单线程无限无阻塞循环占用率不会达到100%)

68800
来自专栏逸鹏说道

Python3 与 C# 扩展之~模块专栏

代码裤子:https://github.com/lotapp/BaseCode/tree/maste

19450
来自专栏IMWeb前端团队

【原译】javascript中的错误处理

本文作者:IMWeb ouven 原文出处:IMWeb社区 未经同意,禁止转载 【原译】javascript中的正确错误处理 A Guide to P...

25490
来自专栏CDA数据分析师

Python性能分析指南

虽然你所写的每个Python程序并不总是需要严密的性能分析,但是当这样的问题出现时,如果能知道Python生态系统中的许多种工具,这样总是可以让人安心的。 分析...

22750
来自专栏DannyHoo的专栏

定位1

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

11420
来自专栏PHP在线

小技巧让你的 if else 看起来更漂亮

刚看到一个提问帖: 《如果程序中出现多层嵌套的 if...else...语句,如何重构可使程序逻辑变得更为清晰易读?》,因回答篇幅比较大,单独开个帖子答一下。 ...

29360
来自专栏喵了个咪的博客空间

phalcon-入门篇8(Model层基础使用2)

phalcon-入门篇8(Model层基础使用2) ? 本教程基于phalcon2.0.9版本 先在这里感谢各位phalcon技术爱好者,我们提供这样一个优秀的...

39940
来自专栏Golang语言社区

使用Go语言框架进行web开发笔记

前言 关于golang的web开发有不少框架,例如 martini, gin, revel,gorilla等。 之前玩过revel,感觉封装的太多了,作为一个小...

42870
来自专栏数据小魔方

RCurl中这么多get函数,是不是一直傻傻分不清!!!

你想知道R语言中的RCurl包中一共有几个get开头的函数嘛,今天我特意数了一下,大约有十四五个那么多(保守估计)! 所以如果对这个包了解不太深入的话,遇到复杂...

44450

扫码关注云+社区

领取腾讯云代金券