Created
November 2, 2012 10:08
-
-
Save airyland/3999912 to your computer and use it in GitHub Desktop.
preview image before upload
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment