HTML5的FileReader实现本地图片预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" id="fileBox" multiple></input>
<input type="button" id="btn" value="读取"></input>
<div id="result"></div>
</body>
</html>
<script type="text/javascript">
var btn=document.getElementById('btn');
btn.onclick=read;
function read(){
var fileBox = document.getElementById("fileBox");
for (var i = 0; i <= fileBox.files.length - 1; i++)
{
var file=fileBox.files[i];
var reader=new FileReader();
reader.readAsDataURL(file);
reader.onload=function(){
var result=document.getElementById("result");
var imgE=document.createElement("img"); imgE.style='width:300px;height:400px;';
imgE.src=this.result; //this.result获取到img的URL
result.appendChild(imgE);
};
};
}
</script>当选择一张图片，点击‘读取’时：
相关推荐
zrtlin 2020-11-09
wikiwater 2020-10-27
heheeheh 2020-10-19
Crazyshark 2020-09-15
ZGCdemo 2020-08-16
jczwilliam 2020-08-16
littleFatty 2020-08-16
idning 2020-08-03
jinxiutong 2020-07-26
lanzhusiyu 2020-07-19
Skyline 2020-07-04
xiaofanguan 2020-06-25
Aveiox 2020-06-23
dragonzht 2020-06-17