IE9下多个file上传图片预览，HTML代码

最新推荐文章于 2025-08-07 22:25:00 发布

原创最新推荐文章于 2025-08-07 22:25:00 发布 · 3.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#file #ie #html #class #function #input

本文介绍了一种使用JavaScript实现的图片预览功能，包括单个和多个文件上传时的实时预览效果。代码中详细展示了如何进行文件类型验证及如何根据不同浏览器特性（如IE和Firefox）调整预览方式。

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

单个处理：

<SCRIPT language = "JavaScript">
var sAllowExt = "jpg|gif|png|bmp";
//后缀判断
function IsExt(url, opt){
	var sTemp;
	var b=false;
	var s=opt.toUpperCase().split("|");
	for (var i=0;i<s.length ;i++ ){
		sTemp=url.substr(url.length-s[i].length-1);
		sTemp=sTemp.toUpperCase();
		s[i]="."+s[i];
		if (s[i]==sTemp){
			b=true;
			break;
		}
	}
	return b;
}
//以下代码控制图片预览
function makeUploadImgChange(sender,divid,imgid){ 
	if(!IsExt(sender.value,sAllowExt)){   
		alert("提示：请选择一个有效的文件，支持的格式有（"+sAllowExt+"）！");  
		return false;   
	}
	var objPreview = document.getElementById(divid); 
	var objImgview = document.getElementById(imgid); 
	if (sender.files &&  sender.files[0]){ 
		// Firefox  
        objImgview.src = sender.files[0].getAsDataURL();       
    }else if(objPreview.filters){  
		//IE
		objPreview.innerHTML = "";
		objPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = sender.value;
	}
}

</SCRIPT>
<input type="file" onchange='makeUploadImgChange(this,"pic","imgpic");' />
<br />
<div id="pic" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width:300px;height:225px;">
<img id="imgpic" src="images/nopic2.gif" width="300" height="225" />
</div>

多个处理：

<style type="text/css">
/* 以下代码控制图片预览 */   
.yl_kk{
	width:120px;
	height:120px;
	overflow: hidden;
	border: 1px solid #CCCCCC;
}
.yl_1{
	width:120px;
	height:120px;
	text-align:left;
	overflow: hidden;
}   
.yl_2{ /* 该对象用于在IE下显示预览图片 */   
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);   
	width:120px;
	overflow: hidden;
}   
.yl_3{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */   
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);  
	width:120px; 
    visibility:hidden; 
	overflow: hidden;  
}   
.yl_4{ /* 该对象用于在FF下显示预览图片 */   
	width:120px;
	height:120px;
	text-align:left;
	overflow: hidden;
}
</style>
<SCRIPT language = "JavaScript">
var sAllowExt = "jpg|gif|png|bmp";
//后缀判断
function IsExt(url, opt){
	var sTemp;
	var b=false;
	var s=opt.toUpperCase().split("|");
	for (var i=0;i<s.length ;i++ ){
		sTemp=url.substr(url.length-s[i].length-1);
		sTemp=sTemp.toUpperCase();
		s[i]="."+s[i];
		if (s[i]==sTemp){
			b=true;
			break;
		}
	}
	return b;
}
//以下代码控制图片预览
function onUploadImgChange(sender,tp1,tp2,tp3){   
    if(!IsExt(sender.value,sAllowExt)){   
        alert("提示：请选择一个有效的文件，支持的格式有（"+sAllowExt+"）！");  
        return false;   
    }
    var objPreview = document.getElementById(tp1);   //'preview'
    var objPreviewFake = document.getElementById(tp2);  // 'preview_fake'
    var objPreviewSizeFake = document.getElementById(tp3);//'preview_size_fake'
    if( sender.files &&  sender.files[0] ){   
        objPreview.style.display = 'block';   
        objPreview.style.width = 'auto';   
        objPreview.style.height = 'auto';   
           
        // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径   
        objPreview.src = sender.files[0].getAsDataURL();       
    }else if(objPreviewFake.filters){    
        // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果   
        //（相同环境有时能显示，有时不显示），因此只能用滤镜来解决   
           
        // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径   
        sender.select();  
		sender.blur(); 
        var imgSrc = document.selection.createRange().text;   
           
        objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;   
        objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
        autoSizePreview(objPreviewFake,objPreviewSizeFake.offsetWidth,objPreviewSizeFake.offsetHeight);   
        objPreview.style.display = 'none';   
    }   
}   
  
function onPreviewLoad(sender){   
    autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );   
}   
  
function autoSizePreview( objPre, originalWidth, originalHeight ){   
    var zoomParam = clacImgZoomParam(120,120,originalWidth,originalHeight );
	//alert("W:"+zoomParam.width+"H:"+zoomParam.height);
    objPre.style.width = zoomParam.width + 'px';   
    objPre.style.height = zoomParam.height + 'px';   
    objPre.style.marginTop = zoomParam.top + 'px';   
    objPre.style.marginLeft = zoomParam.left + 'px';   
}   
  
function clacImgZoomParam( maxWidth, maxHeight, width, height ){   
    var param = { width:width, height:height, top:0, left:0 };   
       
	param.width = maxWidth;
	param.height = maxHeight;
	param.left =0;
	param.top = 0;
       
    return param;   
} 
</SCRIPT>



<TABLE width="600" border="0" cellspacing="0" cellpadding="0">
  <TR>
    <TD width="25%" align="center">
<div class="yl_kk" id="kk1">
<div class="yl_1" id="tp14">
<div class="yl_2" id="tp12">
<img class="yl_4" id="tp11" src="images/nopic2.gif" onload="onPreviewLoad(this)"/>
</div>
</div>
<br/> 
<img class="yl_3" id="tp13" />
</div>
    <INPUT name="pic1" type=file class=picup id="pic1" onChange="onUploadImgChange(this,'tp11','tp12','tp13')" size="4"></TD>
    <TD width="25%" align="center">
<div class="yl_kk" id="kk2">
<div class="yl_1" id="tp24">
<div class="yl_2" id="tp22">
<img class="yl_4" id="tp21" src="images/nopic2.gif" onload="onPreviewLoad(this)"/>
</div>
</div>
<br/> 
<img class="yl_3" id="tp23" />
</div>
    <INPUT name="pic2" type=file class=picup id="pic2" onChange="onUploadImgChange(this,'tp21','tp22','tp23')" size="4"></TD>
    <TD width="25%" align="center">
<div class="yl_kk" id="kk3">
<div class="yl_1" id="tp34">
<div class="yl_2" id="tp32">
<img class="yl_4" id="tp31" src="images/nopic2.gif" onload="onPreviewLoad(this)"/>
</div>
</div>
<br/> 
<img class="yl_3" id="tp33" />
</div>
    <INPUT name="pic3" type=file class=picup id="pic3" onChange="onUploadImgChange(this,'tp31','tp32','tp33')" size="4"></TD>
    <TD width="25%" align="center">
<div class="yl_kk" id="kk4">
<div class="yl_1" id="tp44">
<div class="yl_2" id="tp42">
<img class="yl_4" id="tp41" src="images/nopic2.gif" onload="onPreviewLoad(this)"/>
</div>
</div>
<br/> 
<img class="yl_3" id="tp43" />
</div>
    <INPUT name="pic4" type=file class=picup id="pic4" onChange="onUploadImgChange(this,'tp41','tp42','tp43')" size="4"></TD>
  </TR>
</TABLE>