上传图片预览

最新推荐文章于 2022-07-07 16:16:13 发布

maozhibin2008

最新推荐文章于 2022-07-07 16:16:13 发布

阅读量93

点赞数 1

分类专栏： javascript 文章标签：浏览器 Google

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>图片上传</title>
<script>
function viewmypic(imgfile) {
if (imgfile.value){
var oImg = new Image();
oImg.src = imgfile.value;
var ow = oImg.width;
var oh = oImg.height;
var ow2 = ow, oh2 = oh;// 得到宽高
try {
if (ow > oh) {
if (ow > 200) {
ow2 = 200;
oh2 = "auto";
}
} else {
if (oh > 200) {
oh2 = 200;
ow2 = "auto";
}
}
var getimg = "<a href=\""
+ oImg.src
+ "\" οnclick=\"window.open(this.href,'','width=500,height=400,top='+(window.screen.height-500)/2+',left='+(window.screen.width-500)/2+',resizable=yes ');return false;\" target=\"_blank\">"
+ "<img border=\"0\" id=\"uploadimg\" src=\"" + oImg.src
+ "\" style=\"width:" + ow2 + ";height:" + oh2 + ";\">"
+ "</a>";
document.getElementById("showPic").innerHTML = getimg;
document.getElementById("showPic").style.display='';
} catch (ex) {
alert(ex.toString());
}
}
}
</script>
</head>
<body>
<center>
<form >
<input name="imgfile" type="file" id="imgfile" size="40" οnchange="viewmypic(this);" />
</form>
<img name="showimg" id="showimg" src="" style="display:none;" alt="预览图片" />
<br />
<div id='showPic' style="display:none">
</div>
</center>
</body>
</html>