airyland/preview.html

## preview.html
<!DOCTYPE html>
<html>
<head>
<meta chraset="utf-8" />
<style type="text/css">
 #kk{
  width:400px; height:400px; overflow: hidden;
 }
 #preview_wrapper{
  width:300px; height:300px; background-color:#CCC; overflow: hidden;
 }
 #preview_fake{
 /* 该对象用于在IE下显示预览图片 */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
  width:300px; overflow: hidden;
 }
 #preview_size_fake{
 /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途*/
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
  width:300px; visibility:hidden; overflow: hidden;
 }
 #preview{
 /* 该对象用于在FF下显示预览图片*/
  width:300px; height:300px; overflow: 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('preview_fake');
  var objPreviewSizeFake = document.getElementById('preview_size_fake');
  if (sender.files && sender.files[0]) {
   objPreview.style.display = 'block';
   objPreview.style.width = 'auto';
   objPreview.style.height = 'auto';
   try {
    objPreview.src = sender.files[0].getAsDataURL();
   } catch(e) {
    var reader = new FileReader();
    reader.onload = function(e) {
     objPreview.src = e.target.result;
    }
    reader.readAsDataURL(sender.files[0]);
   }
   // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
  } 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;
   //alert("已成功选择图片！");
   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(300, 300, originalWidth, originalHeight);
  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};
  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;
 }
</script>
</head>
<body>
 <p>
  <input name="localfile" type="file" id="localfile" size="28" onchange="onUploadImgChange(this)"
  />
  <!--以下是预览图片用的-->
  <div id="kk">
   <div id="preview_wrapper">
    <div id="preview_fake">
     <img id="preview" src="http://placekitten.com/300/300" onload="onPreviewLoad(this)" />
    </div>
   </div>
   <br/>
   <img id="preview_size_fake" />
  </div>
 </p>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta chraset="utf-8" />
	<style type="text/css">
	#kk{
	width:400px; height:400px; overflow: hidden;
	}
	#preview_wrapper{
	width:300px; height:300px; background-color:#CCC; overflow: hidden;
	}
	#preview_fake{
	/* 该对象用于在IE下显示预览图片 */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
	width:300px; overflow: hidden;
	}
	#preview_size_fake{
	/* 该对象只用来在IE下获得图片的原始尺寸，无其它用途*/
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
	width:300px; visibility:hidden; overflow: hidden;
	}
	#preview{
	/* 该对象用于在FF下显示预览图片*/
	width:300px; height:300px; overflow: 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('preview_fake');
	var objPreviewSizeFake = document.getElementById('preview_size_fake');
	if (sender.files && sender.files[0]) {
	objPreview.style.display = 'block';
	objPreview.style.width = 'auto';
	objPreview.style.height = 'auto';
	try {
	objPreview.src = sender.files[0].getAsDataURL();
	} catch(e) {
	var reader = new FileReader();
	reader.onload = function(e) {
	objPreview.src = e.target.result;
	}
	reader.readAsDataURL(sender.files[0]);
	}
	// Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
	} 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;
	//alert("已成功选择图片！");
	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(300, 300, originalWidth, originalHeight);
	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};
	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;
	}
	</script>
	</head>
	<body>
	<p>
	<input name="localfile" type="file" id="localfile" size="28" onchange="onUploadImgChange(this)"
	/>
	<!--以下是预览图片用的-->
	<div id="kk">
	<div id="preview_wrapper">
	<div id="preview_fake">
	<img id="preview" src="http://placekitten.com/300/300" onload="onPreviewLoad(this)" />
	</div>
	</div>
	<br/>
	<img id="preview_size_fake" />
	</div>
	</p>
	</body>
	</html>