<!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>