<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#background1{
/*该对象用户在IE下显示预览图片*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#preview_size_fake{
/*该对象只用来在IE下获得图片的原始尺寸无其它用途*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
visibility:hidden;
}
</style>
<script type="text/javascript">
function onUploadImgChange(sender){
if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){
alert('图片格式无效');
return false;
}
var objPreview = document.getElementById( 'preview' );
var objPreviewFake = document.getElementById( 'background1' );
var file=document.getElementById("image");
if( sender.files && sender.files[0] ){
objPreview.style.display = 'block';
objPreview.style.width = 'auto';
objPreview.style.height = 'auto';
objPreview.src = window.URL.createObjectURL(file.files[0])
}else if( objPreviewFake.filters ){
sender.select();
var imgSrc = document.selection.createRange().text;
objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
autoSizePreview( objPreviewFake,1500,800);
objPreview.style.display = 'none';
}
}
function onPreviewLoad(sender){
autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );
}
function autoSizePreview( objPre, originalWidth, originalHeight ){
var zoomParam = clacImgZoomParam( 800, 450, originalWidth, originalHeight );
objPre.style.width = zoomParam.width + 'px';
objPre.style.height = zoomParam.height + 'px';
objPre.style.marginLeft = zoomParam.left + 'px';
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = { width:width, height:height, top:0, left:0 };
if( width>maxWidth || height>maxHeight ){
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if( rateWidth > rateHeight ){
param.width = maxWidth;
param.height = height / rateWidth;
}else{
param.width = width / rateHeight;
param.height = maxHeight;
}
}
param.left = (maxWidth - param.width) / 2;
param.top = (maxHeight - param.height) / 2;
return param;
}
function clearImage(){
var objPreviewFake = document.getElementById("background1");
objPreviewFake.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = "";
}
</script>
</head>
<body>
<div id="background1" ><img id="preview" onload="onPreviewLoad(this)" style="display: none"/></div><!-- End background1 -->
<br/>
<input type="file" size='50' onchange="onUploadImgChange(this)" id="image" name="image" class="input" />
<input type="button" value="删除背景" onclick="clearImage()"/>
<br/>
</body>
</html>
