javascript——base64 

<!DOCTYPE html>
<head>
<title>欢迎</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<div class="main">
<input type="file" id="demoInput">
<textarea id="result" cols="30" rows="10"></textarea>
<div id="imgArea">
123
</div>
</div>
<script type="text/javascript">
window.onload = function(){
//var main = document.getElementsByClassName('main')[0];
var myFile = document.getElementById('demoInput');
var result = document.getElementById('result');
var imgArea = document.getElementById('imgArea');

if(typeof(FileReader)==='undefined'){
result.innerHTML = '请使用现代浏览器操作';	
}
else{
myFile.addEventListener('change',readFile,false);
}

function readFile(){
var file = this.files[0];
if(!/image\/\w+/.test(file.type)){
alert('请上传图片');
return false;
}

//debugger;
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
var img = document.createElement('img');
img.src = this.result; 
img.style.width = "100%";
img.style.height = "100%" ;
document.body.appendChild(img);
result.innerHTML = '<img src="'+this.result+'" alt=""/>';
}
}

// myFile.onchange = function(){

// readFile();//返回方法结果

// }

//myFile.onchange = readFile;//方法签名

}
</script>
</body>
</html>

　　

posted @ 2016-04-26 16:52  青草圆  阅读(183)  评论(0)  编辑  收藏  举报