<style> |
.imagePreview { |
width: 160px; |
height: 120px; |
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); |
} |
</style> |
<script type= "text/javascript" > |
var loadImageFile = ( function (obj,img) { |
//非IE |
if (window.FileReader) { |
var oPreviewImg = null , oFReader = new window.FileReader(), |
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; |
oFReader.onload = function (oFREvent) { |
if (!oPreviewImg) { |
var newPreview = document.getElementById(img); |
oPreviewImg = new Image(); |
oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px" ; |
oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px" ; |
newPreview.appendChild(oPreviewImg); |
} |
oPreviewImg.src = oFREvent.target.result; |
}; |
return function () { |
var aFiles = obj.files; |
if (aFiles.length === 0) { return ; } |
if (!rFilter.test(aFiles[0].type)) { alert( "图片格式不正确,请选择图片格式的文件!" ); return ; } |
oFReader.readAsDataURL(aFiles[0]); |
} |
} |
//IE |
if (navigator.appName === "Microsoft Internet Explorer" ) { |
return function (obj,img) { |
alert(obj.value); |
var ext = obj.value.split( "." )[1]; |
if (!(/^(jpg|jpeg|JPG|JPEG|png|PNG|pdf)$/.test(ext))) { |
alert( '图片格式不正确,请选择图片格式的文件!' ); |
return ; |
} |
|
document.getElementById(img).filters.item( "DXImageTransform.Microsoft.AlphaImageLoader" ).src = obj.value; |
} |
} |
})(); |
</script> |
<div id= "imgHouseholdBoy" class= "imagePreview" > |
</div> |
<div> |
<asp:FileUpload ID= "FileUpload1" runat= "server" CssClass= "file" onchange= "loadImageFile(this,'imgHouseholdBoy');" /> |
</div> |