以下是最后的研究结果，同时兼容IE6,IE7,IE8和Firefox。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
var picPath;
var image;
// preview picture
function preview()
{
document.getElementById('preview').style.display = 'none';
// 下面代码用来获得图片尺寸，这样才能在IE下正常显示图片
document.getElementById('box').innerHTML
= "<img width='"+image.width+"' height='"+image.height+"' id='aPic' src='"+picPath+"'>";
}
// show view button
function buttonShow()
{
/*
这里用来解决图片加载延时造成的预览失败.
简单说明一下，当image对象的src属性发生改变时JavaScript会重新给image装载图片内容，
这通常是需要一些时间的，如果在加载完成之前想将图片显示出来就会造成错误，所以我们
通过图片的宽度和高度来判断图片是否已经被成功加载，加载完毕才会显示预览按钮.
这里我仍然有一个困惑，在IE7下预览效果偶尔会失效.
*/
if ( image.width == 0 || image.height == 0 ) {
setTimeout(buttonShow, 1000);
} else {
document.getElementById('preview').style.display = 'block';
}
}
function loadImage(ele) {
picPath = getPath(ele);
image = new Image();
image.src = picPath;
setTimeout(buttonShow, 1000);
}
function getPath(obj)
{
if(obj)
{
//ie
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
obj.select();
// IE下取得图片的本地路径
return document.selection.createRange().text;
}
//firefox
else if(window.navigator.userAgent.indexOf("Firefox")>=1)
{
if(obj.files)
{
// Firefox下取得的是图片的数据
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
</script>
</head>
<body>
<input type="file" name="pic" id="pic" onchange='loadImage(this)' />
<input id='preview' type='button' value='preview' style='display:none;' onclick='preview();'>
<div id='box'></div>
</body>
</html>
代码二：
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> html－www.51windows.Net </title>
</head>
<body>
<script>
var img=null;
function s()
{
if(img)img.removeNode(true);
img=document.createElement( "img ");
img.style.position= "absolute ";
img.style.visibility= "hidden ";
img.attachEvent( "onreadystatechange ",orsc);
img.attachEvent( "onerror ",oe);
document.body.insertAdjacentElement( "beforeend ",img);
img.src=inp.value;
}
function oe()
{
alert( "cant load img ");
}
function orsc()
{
if(img.readyState!= "complete ")return false;
alert( "高: "+img.offsetHeight+ "\n宽: "+img.offsetWidth);
}
</script>
<input type= "file " Name= "file " id= "inp " value= "默认值 "> <br> <input onclick= "s() " type= "button " value= "点我一下给出要上传图片的大小及长、宽 " name= "button ">
</body>
</html>
代码三：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>图片上传——www.aa25.cn</title>
<script>
function viewmypic(mypic,imgfile) {
if (imgfile.value){
mypic.src=imgfile.value;
mypic.style.display="";
mypic.border=1;
}
}
</script>
</head>
<body>
<center>
<form >
<input name="imgfile" type="file" id="imgfile" size="40" onchange="viewmypic(showimg,this.form.imgfile);" />
<br />
</form>
<img name="showimg" id="showimg" src="" style="display:none;" alt="预览图片——www.aa25.cn" />
<br />
</div>
<div style="display:none">
</div>
</center>
</body>
</html>
代码四：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS上传前预览图片 www.codefans.net</title>
<script type="text/javascript" language="javascript">
<!--
function PreviewImg(imgFile){
var newPreview = document.getElementById("newPreview");
var imgDiv = document.createElement("div");
document.body.appendChild(imgDiv);
imgDiv.style.width = "118px"; imgDiv.style.height = "127px";
imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
newPreview.appendChild(imgDiv);
var showPicUrl = document.getElementById("showPicUrl");
showPicUrl.innerText=imgFile.value;
newPreview.style.width = "80px";
newPreview.style.height = "60px";
}
-->
</script>
</head>
<body>
<form>
<p>兼容IE6、IE7</p>
<div id="newPreview"></div>
<div id="showPicUrl"></div>
<hr />
<p>
选择图片：<input type="file" size="20" onchange="javascript:PreviewImg(this);" />
</p>
<input type="submit" value="submit">
</form>
</body>
</html>
分享到：
相关推荐
虽然可以在ie6,ie7,火狐预览、但在谷歌浏览器还是不行、哪位高人要是有更好的办法浏览、能否交流交流. qq:253930407 email:ruanjingwang@yahoo.com.cn
图片上传 预览 兼容 IE 6/7/8 firefox / 新版firefox
NULL 博文链接：https://669341085.iteye.com/blog/874153
Jsp图片预览程序（含Java源码） 目前，很多网站都在为提升用户体验而努力，想尽多种办法让用户在网站上...程序中的JavaScript部分兼容ie6/7/8, firefox 3.5.5以及opera 10、safari 4.0.4、 chrome 3.0 等多种浏览器。
兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
我找了很久，大多数都不能兼容最新版的火狐，这个能行，希望可以帮助到真正需要的人
asp.net 多图片上传 预览 兼容火狐 IE
js上传前预览图片，兼容IE,firefox,google
javascript 上传并预览图片（兼容IE，6,7,8,9+,谷歌,火狐,Safari）移动端也可以。
JavaScript解决预览上传问题，目前支持IE7、IE8、火狐浏览器； 上网查找了大量资料，然而能用的代码却寥寥无几；竟然弄出来了，就共享给大家。
NULL 博文链接：https://youyou-1987.iteye.com/blog/813465
2 兼容ie,firefox 3 实现判断文件大小。火狐下实现了上传前判断图片大小，ie下目前是采用ActiveXObject方法，但会弹框提示，不友好，提供ajax方式后台判断文件大小。 4 判断图片类型合法性。 5 上传前判断图片尺寸。...
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片，而不需上传服务器，提高...兼容：ie6/7/8, firefox 3.5.5 后台支持下还兼容：opera 10.10, safari 4.0.4, chrome 3.0
js预览图片兼容ie6，7，8，火狐等浏览器
NULL 博文链接：https://1017401036.iteye.com/blog/2098990
1. 解压 PDF前端预览功能.zip 压缩包，复制到网站开发目录； 2. 调用方式：window.open("Scripts/lib/PDF/web/viewer.... 3. 能支持多种浏览，火狐、IE、谷歌、360等，能支持本地文件直接浏览。
<body> <form id="form1" runat="server"> ; height: 50px;"> *封面： ... ID="FileUpload1" runat="server" />请上传案例的封面图片 </form> </body>
javascript 上传图片预览效果，兼容：ie6/7/8, firefox 3.5.5
图片上传预览，亲测兼容：ie6~ie8及以上浏览器，谷歌，火狐，Safari，opera，兼容移动端