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

单个处理：

<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>