使用HTML5的File实现base64和图片的互转


Posted in HTML / CSS onAugust 01, 2013

刚接触到一个内联图片的概念,内联图片即使把图片文件编码成base64 看下面代码即是内联问题

可以减少http的请求,缺点是不能跨域缓存!

复制代码
代码如下:

<img src="data:image/jpeg;base64,/9j/4QqsRX..." alt="">

然后在线如何把图片转化成base64

如果只依靠单纯的javascript是有权限问题的 js不允许操作本地的file文件或文件夹 为了安全问题

现在html5来了 百度了下有不少资料 中文的也不少 给下w3c的文档 http://www.w3.org/TR/FileAPI/

现在我们用html5的file api里的 readAsDataURL函数 这是一个把文件转化成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/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单的html5 File测试 for pic2base64</title>
<style>
</style>
<script>
window.onload = function(){
var input = document.getElementById("demo_input");
var result= document.getElementById("result");
var img_area = document.getElementById("img_area");
if ( typeof(FileReader) === 'undefined' ){
result.innerHTML = "抱歉,你的浏览器不支持 FileReader,请使用现代浏览器操作!";
input.setAttribute( 'disabled','disabled' );
} else {
input.addEventListener( 'change',readFile,false );}
}
function readFile(){
var file = this.files[0];
//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = '<img src="'+this.result+'" alt=""/>';
img_area.innerHTML = '<div class="sitetip">图片img标签展示:</div><img src="'+this.result+'" alt=""/>';
}
}
</script>
</head>
<body>
<input type="file" value="sdgsdg" id="demo_input" />
<textarea id="result" rows=30 cols=300></textarea>
<p id="img_area"></p>
</body>
</html>
HTML / CSS 相关文章推荐
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 #HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 #HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
Jul 25 #HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 #HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 #HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 #HTML / CSS
html5弹跳球示例代码
Jul 23 #HTML / CSS
You might like
解析wamp5下虚拟机配置文档
2013/06/27 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
js原型链原理看图说明
2012/07/07 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
python实现保存网页到本地示例
2014/03/16 Python
python实现目录树生成示例
2014/03/28 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python之py2exe打包工具详解
2017/06/14 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
Python流程控制 if else实现解析
2019/09/02 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
年度考核自我鉴定
2013/11/09 职场文书
商场拾金不昧表扬信
2014/01/13 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
车辆委托书范本
2014/10/05 职场文书
工伤事故证明
2014/10/20 职场文书
python识别围棋定位棋盘位置
2021/07/26 Python
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
关于Vue中的options选项
2022/03/22 Vue.js