使用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结构性伪类选择器九种写法
Apr 18 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 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
什么是MVC,好东西啊
2007/05/03 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
详解python中字典的循环遍历的两种方式
2017/02/07 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
python 公共方法汇总解析
2019/09/16 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
自考生自我鉴定范文
2013/10/01 职场文书
应届生会计求职信
2013/11/11 职场文书
采购文员岗位职责
2013/11/20 职场文书
说明书怎么写
2014/05/06 职场文书
保护动物的标语
2014/06/11 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
财政局个人总结
2015/03/04 职场文书
2015大学迎新标语
2015/07/16 职场文书
2016公务员年度考核评语
2015/12/01 职场文书