html源代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>图片上传</title>
</head>
<style>
div#showdiv{
width:200px;
}
img#showimg{
cursor:pointer;
}
</style>
<body>
<center>
<form >
<div id="showdiv">
<label for="upfile">
<img name="showimg" id="showimg" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=687491883,734414948&fm=26&gp=0.jpg" style="display:block;" alt="预览图片" width="300" />
</label>
</div>
<input name="upfile" type="file" id="upfile" size="40" onchange="viewmypic(showimg,this.form.upfile);" style="display:none;" />
<br />
</form>
<br />
</div>
<div style="display:none">
</div>
</center>
<script>
function viewmypic(mypic,upfile) {
if(upfile.files && upfile.files[0])
{
mypic.style.display="";
//火狐下,直接设img属性
//mypic.src = upfile.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
mypic.src = window.URL.createObjectURL(upfile.files[0]);
}
else
{
//IE下
if (upfile.value){
mypic.src=upfile.value;
mypic.style.display="";
mypic.border=1;
}
}
}
</script>
</body>
</html>
标签:files,src,style,mypic,预览,点击,getAsDataURL,上传,upfile
From: https://blog.51cto.com/ding/9225094