图片上传预览

最新推荐文章于 2022-08-23 11:53:02 发布

dchuan

最新推荐文章于 2022-08-23 11:53:02 发布

阅读量92

点赞数

文章标签： Microsoft JavaScript ViewUI

本文链接：https://blog.csdn.net/dchuan/article/details/83772730

版权

<title>文件上传前台控制检测程序 v0.6</title>
<style>
body,td{font-size:12px;}
</style>
<script language=javascript>
function FnImgChange()
{
var objImgPath = document.getElementById("file_pic_path1");
var objImg = document.getElementById("divShow");
var img = objImgPath.value;

objImg.style.visibility = "hidden";
objImg.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img;
objImg.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";

//过一小会获取div的宽高.
setTimeout("setImg()",100);
}

function setImg()
{
var o = document.getElementById("divShow");
var width_img;
var height_img;

o.style.visibility = "visible";
width_img=o.offsetWidth;
height_img=o.offsetHeight;

var width=420; //预定义宽，图片的宽度了
var height=200; //预定义高，如果宽小于长度，那么他会自适应按照宽度来计算比例，所以对于一般情况长>宽的照片时候，这个参数没啥意义

var ratW; //宽的缩小比例
var ratH; //高的缩小比例
var rat; //实际使用的缩小比例
if(width_img <width && height_img <height)
{
//如果比预定义的宽高小，原图显示。
o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
return;
}
else
{
//如果大的化，要把 sizingMethod改成scale 如果属性是image,不管怎么改div的宽高，都不起作用
o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
}
ratH = height/height_img;
ratW = width/width_img;
if(ratH <ratW) //选择最小的作为实际的缩小比例
rat=ratH;
else
rat=ratW;
width_img = width_img * rat;
height_img = height_img * rat;
o.style.width = width_img;
o.style.height = height_img;
}

</script>
<form enctype="multipart/form-data" method="POST" οnsubmit="return HasChecked;">
<input type="file" id="file_pic_path1" οnchange="FnImgChange()" style="width:180px;">

[align=right]
图片:
[align=right]
<font color="#FF0000">*</font>选择图片:
[/align]
</td>
<td width="78%">
<input οnchange="getPreImg();" id="uploadField" name="fileName" encType="multipart/form-data" method="post" type="file" class="text1" size="60" maxlength="60">
</td>
</tr>

代码
－－－－－－－－－－－－
<html>
<head>
<meta name="generator" content="microsoft visual studio 6.0">
<title></title>
</head>
<script language=javascript>

</script>

<body>
<form action="" method=post id=form1 name=form1>
<input id=file1 type=file name=file1 οnchange="changephoto()">

</form>
[url=javascript:show()]test[/url]
<br>
<img id="img1" >

</body>
</html>

这样的代码能获取我们需要上传的图片的大小，不过对于上传其他类型的文件，似乎有点无能为了了，而且更有一个问题，不论通过何种方法想把img1隐藏起来，能获取图片的大小，但却获取不了图片的尺寸。