js中base64编码应用

参考链接:http://www.cnblogs.com/faith3/p/6371477.html

 

使用JS的FileReader对象来实现对图片进行base64编码

1、检查浏览器对FileReader的支持

if(window.FileReader){

var fr = new FileReader();

}

 

2、使用FileReader的readAsDataURL方法

fr.readAsDataURL(file);

fr.onload = function() { var reslut = this.result; //得到编码后的字符串数据 };

 

 

例:

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>FileReader</title>

</head>

<body>

<p>

<label>请选择一个文件:</label>

<input type="file" id="file" />

<input type="button" value="读取图像" οnclick="readAsDataURL()" />

<input type="button" value="读取二进制数据" οnclick="readAsBinaryString()" />

<input type="button" value="读取文本文件" οnclick="readAsText()" />

</p>

<div id="result" name="result"></div>

</body>

</html>

 

<script type="text/javascript">

var result=document.getElementById("result");

var file=document.getElementById("file");

//判断浏览器是否支持FileReader接口

if(typeof FileReader == 'undefined'){

result.InnerHTML="<p>你的浏览器不支持FileReader接口!</p>";

//使选择控件不可操作

file.setAttribute("disabled","disabled");

}

function readAsDataURL(){

//检验是否为图像文件

var file = document.getElementById("file").files[0];

if(!/image\/\w+/.test(file.type)){

alert("看清楚,这个需要图片!");

return false;

}

var reader = new FileReader();

//将文件以Data URL形式读入页面

reader.readAsDataURL(file);

reader.οnlοad=function(e){

var result=document.getElementById("result");

//显示文件

result.innerHTML='<img src="' + this.result +'" alt="" />';

}

}

</script>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值