第一种:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>base64</title>
<style type="text/css">
</style>
</head>
<body>
<div>
<input type="file" id="image">
<input type="button" name="" value="点击" onclick='test()'>
</div>
<img src="" id="img1">
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
</body>
</html>
function test(){
var reader = new FileReader();
var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)( 2 M = 2097152 B )超过2M上传失败
var file = $("#image")[0].files[0];
console.log(file)//这里可以查看file的类型和大小等
var imgUrlBase64;
if (file) {
//将文件以Data URL形式读入页面,貌似并没有返回值
imgUrlBase64 = reader.readAsDataURL(file);
reader.onload = function (e) {//读取成功后的回调
console.log(reader)
var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分(可选可不选,需要与后台沟通)
if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
alert( '上传失败,请上传不大于2M的图片!');
return;
}else{
//执行上传操作
alert(reader.result);
$("#img1").attr('src',reader.result);
}
}
}
}
第二种:
网站:http://www.jb51.net/article/128554.htm
function getBase64(url){
//通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 <img> 省去了 append(),也就避免了文档冗余和污染
var Img = new Image(),
dataURL='';
Img.src=url;
Img.onload=function(){ //要先确保图片完整获取到,这是个异步事件
var canvas = document.createElement("canvas"), //创建canvas元素
width=Img.width, //确保canvas的尺寸和图片一样
height=Img.height;
canvas.width=width;
canvas.height=height;
canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中
dataURL=canvas.toDataURL('image/jpeg'); //转换图片为dataURL
};
}