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

时间: 2024-10-03 06:36:16

Html5 FileReader 对文件进行Base64编码的相关文章

急求 文件读取 base64编码转换问题

问题描述 服务器端,读取路径http://localhost/imageput/an_1328159468-39.jpg下的图片,进行编码变成类似:version="1.0"?><base64Binary>twJ3ZzQAAAPfn93/H93PVwHPK93fTsvfn53/NzWbT5n9/f3/H5m7ZsmrQ8n/K2mbV==</base64Binary>这种格式,然后传递到Sliverlight客户端使用,代码怎么写呢? 解决方案 解决方案二

python将图片文件转换成base64编码的方法_python

本文实例讲述了python将图片文件转换成base64编码的方法.分享给大家供大家参考.具体实现方法如下: import base64 f=open(r'c:\jb51.gif','rb') #二进制方式打开图文件 ls_f=base64.b64encode(f.read()) #读取文件内容,转换为base64编码 f.close() 调用方法如下: 复制代码 代码如下: <img src="R0lGODlh1wBOAPcAAAAAAP///7a4u+jq7bG1ucrN0N7g4tLU

base64编码类------源代码(C#)

编码|源代码 using System; namespace shapBse64{ /// <summary> /// 有关base64编码算法的相关操作 ///By 自由奔腾(wgscd) /// </summary> public class SBase64 { public SBase64() { // // TODO: 在此处添加构造函数逻辑 // } //-----------------------------------------------------------

js对图片base64编码字符串进行解码并输出图像

 这篇文章主要介绍了js对图片base64编码字符串进行解码并输出图像的具体实现,大家可以参考下面的示例  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xh

js对图片base64编码字符串进行解码并输出图像示例_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

用XMLDOM和ADODB.Stream实现base64编码解码实现代码_javascript技巧

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> 用 XMLDOM 和 ADODB.Stream 实现base64编码解码 </title> <meta http-equiv="Content-Type" content="text/html; cha

Android数据加密之Base64编码算法的简单实现_Android

前面学习总结了平时开发中遇见的各种数据加密方式,最终都会对加密后的二进制数据进行Base64编码,起到一种二次加密的效果,其实呢Base64从严格意义上来说的话不是一种加密算法,而是一种编码算法,为何要使用Base64编码呢?它解决了什么问题?这也是本文探讨的东西? 什么Base64算法? Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,Base64并不是安全领域的加密算法,其实Base64只能算是一个编码算法,对数据内容进行编码来适合传输.标准Base64编码解码无需额外信

利用openssl进行BASE64编码解码、md5/sha1摘要、AES/DES3加密解密

本文介绍了openssl的几个实用命令,利用openssl进行BASE64编码解码.md5/sha1摘要.AES/DES3加密解密. 一. 利用openssl命令进行BASE64编码解码(base64 encode/decode)      1. BASE64编码命令       对字符串'abc'进行base64编码:           # echo abc | openssl base64           YWJjCg==  (编码结果)        如果对一个文件进行base64编

Java实现图片与Base64编码互转_java

淘宝里面的html用base64转换图片,不知道为什么,不过看起来好像很美好,话不多说,直接上代码: import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import sun.misc.BASE64Decoder; import sun.misc.BA