IE7 添加图片时浏览本地图片功能实现

最新推荐文章于 2025-08-07 14:42:17 发布

mady55

最新推荐文章于 2025-08-07 14:42:17 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： ie browser input javascript stylesheet class

本文链接：https://blog.youkuaiyun.com/mady55/article/details/2033716

本文介绍了一个基于HTML和JavaScript的图片上传与预览功能的实现方案，包括如何通过JavaScript动态获取并调整图片尺寸，确保图片能在网页上正确显示。此外还提供了针对不同浏览器的兼容性解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<html>

<head>

<title>LinkAdd</title>

#previewImage

{

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);

}

.p1 {

BORDER-RIGHT: #c0c0c0 1px dashed; line-height:10px; padding:4px; BORDER-TOP: #c0c0c0 1px dashed; BORDER-LEFT: #c0c0c0 1px dashed; BORDER-BOTTOM: #c0c0c0 1px dashed

}

.c3 {

COLOR: #228b22

}

.b {

FONT-WEIGHT: bold

}

.f8 {

FONT-SIZE: 8pt;

height:60px;

line-height:16px;

}

</style>

<!--

//function ResizeImage(obj, newW, newH)

//{

// if(obj == null) return;

// var oImg = new Image();

// oImg.src = obj.value;

// var oldW=oImg.width;

// var oldH=oImg.height;

//alert(oldW);

// document.getElementsByName("LinkAdd1:tbwidth")[0].value=oldW;

// document.getElementsByName("LinkAdd1:tbheight")[0].value=oldH;

// //准备传递变量

// if(document.getElementById("dwPicWidth"))

// document.getElementById("dwPicWidth").value=oldW;

// if(document.getElementById("dwPicHeight"))

// document.getElementById("dwPicHeight").value=oldH;

// if(oldW>newW || oldH>newH) {

// w=oldW/newW;

// h=oldH/newH;

// if(h>w) w=h;

// oldW=oldW/w;

// oldH=oldH/w;

// }

// if(oldW > 0 && oldH > 0)

// obj.width=oldW;

// obj.height=oldH;

// if(obj.width>newW || obj.height>newH) {

// setTimeout("ResizeImage(null,"+newW+","+newH+")",40);

// }

//}

function GetImageWH(obj)

{

if(obj == null) return;

var oImg = new Image();

oImg.src = obj.src;

var oldW=oImg.width;

var oldH=oImg.height;

//alert(document.getElementById("previewImage").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src);

document.getElementsByName("LinkAdd1:tbwidth")[0].value=oldW;

document.getElementsByName("LinkAdd1:tbheight")[0].value=oldH;

}

function showclasslist(idstr)

{

//alert(idstr);

var el = document.getElementsByTagName('div');

var len = el.length;

for(var i=0; i<len; i++)

{

if(el[i].id.indexOf("list_")>=0)

{

el[i].style.display="none";

}

document.getElementById("list_"+idstr).style.display="block";

}

function preview(fileinput)

{

var previewImage=document.getElementById("previewImage");

previewImage.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = fileinput.value;

previewImage.style.width = "100px";

previewImage.style.height = "100px";

GetImageWH(document.getElementById("previewImage").filters.item("DXImageTransform.Microsoft.AlphaImageLoader"));

// document.getElementById("previewImage").innerHTML = "预览<br><img src=""+imgsrc+"" width="100" align="absmiddle" onload="ResizeImage(this, 100, 100)">";

// alert(document.getElementById("previewImage").innerHTML);

}

-->

</script>

</head>

<body>

<!--

var theForm = document.forms['Form1'];

if (!theForm) {

theForm = document.Form1;

}

function __doPostBack(eventTarget, eventArgument) {

if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget;

theForm.__EVENTARGUMENT.value = eventArgument;

theForm.submit();

}

// -->

</script>

<!--

function ResizeImage(obj, newW, newH)

{

if(obj == null) return;

var oImg = new Image();

oImg.src = obj.src;

var oldW=oImg.width;

var oldH=oImg.height;

document.getElementsByName("LinkAdd1:tbwidth")[0].value=oldW;

document.getElementsByName("LinkAdd1:tbheight")[0].value=oldH;

//准备传递变量

if(document.getElementById("dwPicWidth"))

document.getElementById("dwPicWidth").value=oldW;

if(document.getElementById("dwPicHeight"))

document.getElementById("dwPicHeight").value=oldH;

if(oldW>newW || oldH>newH) {

w=oldW/newW;

h=oldH/newH;

if(h>w) w=h;

oldW=oldW/w;

oldH=oldH/w;

}

if(oldW > 0 && oldH > 0)

obj.width=oldW;

obj.height=oldH;

if(obj.width>newW || obj.height>newH) {

setTimeout("ResizeImage(null,"+newW+","+newH+")",40);

}

-->

</script>

<p>

<table width="708" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#666633"

id="Table2" style="width: 708px; height: 160px">

<tr>

<font class="font08">友情链接添加</font></td>

</tr>

<tr>

是否图片链接:

<tr>

</tr>

</table><input name="LinkAdd1:Flinkimg" type="file" id="LinkAdd1_Flinkimg" style="width: 272px; height: 22px" onchange="preview(this);" size="26" />

高

宽

</div>

<img src="Images/ie.gif" width="40" height="40" style="float: left; padding-right: 20px;"><span

class="c3 b">使用IE 7.x 的用户须知</span><br>

<li>你需要在“工具->Internet选项->安全->信任站点->站点”选项的中将“[本站地址]”添加为信任站点。否则图象大小将不能从硬盘正常读取。</li></ul>

</div>

</td>

</tr>

</table>

</font>

</p>

function browserinfo(){

var Browser_Name=navigator.appName;

var Browser_Version=parseFloat(navigator.appVersion);

var Browser_Agent=navigator.userAgent;

var Actual_Version,Actual_Name;

var is_IE=(Browser_Name=="Microsoft Internet Explorer");

var is_NN=(Browser_Name=="Netscape");

if(is_NN){

if(Browser_Version>=5.0){

var Split_Sign=Browser_Agent.lastIndexOf("/");

var Version=Browser_Agent.indexOf(" ",Split_Sign);

var Bname=Browser_Agent.lastIndexOf(" ",Split_Sign);

Actual_Version=Browser_Agent.substring(Split_Sign+1,Version);

Actual_Name=Browser_Agent.substring(Bname+1,Split_Sign);

}

else{

Actual_Version=Browser_Version;

Actual_Name=Browser_Name;

}

else if(is_IE){

var Version_Start=Browser_Agent.indexOf("MSIE");

var Version_End=Browser_Agent.indexOf(";",Version_Start);

Actual_Version=Browser_Agent.substring(Version_Start+5,Version_End)

Actual_Name=Browser_Name;

if(Browser_Agent.indexOf("Maxthon")!=-1){

Actual_Name+="(Maxthon)";

}

else if(Browser_Agent.indexOf("Opera")!=-1){

Actual_Name="Opera";

var tempstart=Browser_Agent.indexOf("Opera");

var tempend=Browser_Agent.length;

Actual_Version=Browser_Agent.substring(tempstart+6,tempend)

}

else{

Actual_Name="Unknown Navigator"

Actual_Version="Unknown Version"

}

navigator.Actual_Name=Actual_Name;

navigator.Actual_Version=Actual_Version;

this.Name=Actual_Name;

this.Version=Actual_Version;

}

browserinfo();

if(navigator.Actual_Name.indexOf("Internet Explorer")>=0&&navigator.Actual_Version.indexOf("7")>=0)

{

//alert(document.getElementById("msgdiv_ts"));

document.getElementById("msgdiv_ts").style.display="block";

}

if(navigator.Actual_Name.toLowerCase()=="firefox")

{

document.getElementById("msgdiv_ts").style.display="block";

document.getElementById("msgdiv_ts").innerHTML="对不起,图片预览功能暂不支持火狐浏览器!";

}

</script>

</body>

</html>