以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
分享到:
相关推荐
本文实例讲述了jQuery实现文件编码成base64并通过AJAX上传的方法。分享给大家供大家参考,具体如下: 使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的...前端对文件进行base64编码并通过aj
使用base64进行文件上传的具体流程是:前台使用js将文件转换为base64格式,后台通过高级编程语言,将base64格式的文件,转换为原文件。下面就来演示一下,C#语言配合js,如何实现图片的base64格式上传与解析保存。...
主要介绍了借助FileReader实现将文件编码为Base64后通过AJAX上传的方法,包括后端对文件数据解码并保存的PHP代码,需要的朋友可以参考下
Html5FileReader文档 Html5FileReader文档 Html5FileReader文档
FileReader文档
将图片转换成base64代码可以减少http请求,因为图片可以以字符编码的形式直接传递到客户端,而文件形式都需要进行http请求。但是也会有一个小缺点,就是图片编码化base64的时候大小会变大,但是通过gzip优化以后基本...
HTML5之FILEREADER的使用.pdf
基于H5的FileReader实现web端读取shp文件,CSV文件,文本文件坐标,并加载到地图上
HTML5 FileReader接口学习笔记
本篇文章主要介绍了浅谈HTML5 FileReader分布读取文件以及其方法简介,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
图片压缩image-compressor基于FileReader,Canvas,Base64的纯前端图片压缩。可调整压缩后的图片尺寸和压缩质量,可直接使用压缩后的base64字符串作为图片src也可以保存到本地使用
javascript HTML5文件上传FileReader API_.docx
HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并...
FileReader文件阅读器代码
调用Web API接口FileReader中readAsDataURL方法读取数据(这个函数参数file标签获取到的文件路径),然后把数据加载到FileReader中(base64格式),之后就可以用Img来指定源时base64格式的数据,可以绘制图片。...
javascript原生的api本来就支持,Base64,但是由于之前的javascript局限性,...当前html5标准正式化之际,Base64将有较大的转型空间,对于Html5 Api中出现的如FileReader Api, 拖拽上传,甚至是Canvas,Video截图都可以实现
本文实例为大家分享了HTML5 JS压缩图片,并获取图片BASE64编码上传的方法,供大家参考,具体内容如下 基本过程 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 ...