兼容IE,Firefox 图片即时显示
<div style="border-right: #aaaaaa 1px solid; padding-right: 5px; border-top: #aaaaaa 1px solid; padding-left: 5px; padding-bottom: 5px; border-left: #aaaaaa 1px solid; padding-top: 5px; border-bottom: #aaaaaa 1px solid; background-color: #228b22">
<html>
<head>
<SCRIPT language=JavaScript>
var isIE = false;
var isFF = false;
var isSa = false;
if((navigator.userAgent.indexOf("MSIE")>0) && (parseInt(navigator.appVersion) >=4))isIE = true;
if(navigator.userAgent.indexOf("Firefox")>0)isFF = true;
if(navigator.userAgent.indexOf("Safari")>0)isSa = true;
function showimg1(obj){
var path;
if(isFF)
{
path=obj.files.item(0).getAsDataURL();//注意：在firefox中通过 obj.files.item(0).getAsDataURL() 获取input中的完整路径，
//否则obj.value 只能显示文件名不包含文件路径
}
else if(isIE)
{
path=obj.value;
}
if(!obj.value)
return;
var reg = new RegExp("\.(jpg|gif|jpeg)+$");//验证文件的格式
if(obj.value.match(reg))
{
var img5=document.getElementById('img5');//判断是否已经存在img5 对象，不存在则创建此对象。
if(img5)
{
img5.src=path;
}
else
{
var img=document.createElement('img');
img.src=path;
img.setAttribute('width','120');
img.setAttribute('height','90');
img.setAttribute('id','img5');
insertAfter(img,obj); //在当前对象后插入img5 控件
}
}
else
{
alert('file format wrong!');
}
}
function showimg2()
{
var img2=document.getElementById('img_name2');
var cardpic2=document.getElementById('cardpic2');
if(isFF)
{
img2.src=cardpic2.files.item(0).getAsDataURL();
}
else if(isIE)
{
img2.src=cardpic2.value;
}
}
function insertAfter(newElement, targetElement)
{
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement)
{
parent.appendChild(newElement);
//如果<em>targetElement</em>是<em>parent</em>最后一个子元素，插入<em>newElement</em>
}
else
{
parent.insertBefore(newElement, targetElement.nextSibling);
//如果不是，插入到<em>targetElement</em>下一个兄弟节点的前面
}
}
</SCRIPT>
</head>
<body>
<form>
<div align="left">
<input type="file" onchange="showimg1(this);" id="cardpic1" name="cardpic1" />
<Br>
<input type="file" onchange="showimg2();" id="cardpic2" name="cardpic2" />
<img border=0 width=140 height=87 id="img_name2">
</div>
</form>
</body>
</html>
<html>
<head>
<SCRIPT language=JavaScript>
var isIE = false;
var isFF = false;
var isSa = false;
if((navigator.userAgent.indexOf("MSIE")>0) && (parseInt(navigator.appVersion) >=4))isIE = true;
if(navigator.userAgent.indexOf("Firefox")>0)isFF = true;
if(navigator.userAgent.indexOf("Safari")>0)isSa = true;
function showimg1(obj){
var path;
if(isFF)
{
path=obj.files.item(0).getAsDataURL();//注意：在firefox中通过 obj.files.item(0).getAsDataURL() 获取input中的完整路径，
//否则obj.value 只能显示文件名不包含文件路径
}
else if(isIE)
{
path=obj.value;
}
if(!obj.value)
return;
var reg = new RegExp("\.(jpg|gif|jpeg)+$");//验证文件的格式
if(obj.value.match(reg))
{
var img5=document.getElementById('img5');//判断是否已经存在img5 对象，不存在则创建此对象。
if(img5)
{
img5.src=path;
}
else
{
var img=document.createElement('img');
img.src=path;
img.setAttribute('width','120');
img.setAttribute('height','90');
img.setAttribute('id','img5');
insertAfter(img,obj); //在当前对象后插入img5 控件
}
}
else
{
alert('file format wrong!');
}
}
function showimg2()
{
var img2=document.getElementById('img_name2');
var cardpic2=document.getElementById('cardpic2');
if(isFF)
{
img2.src=cardpic2.files.item(0).getAsDataURL();
}
else if(isIE)
{
img2.src=cardpic2.value;
}
}
function insertAfter(newElement, targetElement)
{
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement)
{
parent.appendChild(newElement);
//如果<em>targetElement</em>是<em>parent</em>最后一个子元素，插入<em>newElement</em>
}
else
{
parent.insertBefore(newElement, targetElement.nextSibling);
//如果不是，插入到<em>targetElement</em>下一个兄弟节点的前面
}
}
</SCRIPT>
</head>
<body>
<form>
<div align="left">
<input type="file" onchange="showimg1(this);" id="cardpic1" name="cardpic1" />
<Br>
<input type="file" onchange="showimg2();" id="cardpic2" name="cardpic2" />
<img border=0 width=140 height=87 id="img_name2">
</div>
</form>
</body>
</html>
今天重新修改一下关于js即时显示的问题，上边的代码如果是以单纯的html文件存在的话显示没有问题，但是如果是要
放在Visual studio 的asp.net 的工程文件中，ie的即时显示片段是有问题的，如果你alert(cardpic2.value);它总是显示
“c:\fakepath\文件名”这样一段东西，其实你的目录结构中不存在“c:\fakepath\”，当时在做项目时也为这个头痛了很久，
后来，引用了下边的一段js 就ok了！
function getValue(obj) {
obj.select(); //该对象选取
return document.selection.createRange().text; //返回选取项的文本内容
}
注意写法：obj.select(); //该对象选取
return document.selection.createRange().text; //返回选取项的文本内容
}
if(isFF)//firefox 无需改动
{
img2.src=cardpic2.files.item(0).getAsDataURL();
}
else if(isIE)
{
//最初的代码
//img2.src=cardpic2.value;
//改进的代码
img2.src=getValue(cardpic2);
}
{
img2.src=cardpic2.files.item(0).getAsDataURL();
}
else if(isIE)
{
//最初的代码
//img2.src=cardpic2.value;
//改进的代码
img2.src=getValue(cardpic2);
}
上面代码，是对js 即时显示的一点补充，如果之前的代码给参考过的人带来不便，在此表示歉意！
