function
DrawImage(ImgD){
var
image
=
new
Image()
image.src=ImgD.src
var
width
=
$(ImgD).attr("width")
var
height
=
$(ImgD).attr("height")
if(width
>100
&&
height>80){
ImgD.width=100
ImgD.height=80
ImgD.alt=image.width+"×"+image.height
}else{
if(image.width>0
&&
image.height>0){
flag=true
if(image.width>300
||
image.height>200){
ImgD.width=image.width/2
ImgD.height=image.height/2
ImgD.alt=image.width+"×"+image.height
}else{
ImgD.width=image.width
ImgD.height=image.height
ImgD.alt=image.width+"×"+image.height
}
}
}
}
下面分享一段关于js实现上传图片及时预览
<!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">
#preview{width:260pxheight:190pxborder:1px
solid
#000overflow:hidden}
#imghead
{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)}
</style>
<script
type="text/javascript">
//图片上传预览
IE是用了滤镜。
function
previewImage(file)
{
var
MAXWIDTH
=
260
var
MAXHEIGHT
=
180
var
div
=
document.getElementById('preview')
if
(file.files
&&
file.files[0])
{
div.innerHTML
='<img
id=imghead>'
var
img
=
document.getElementById('imghead')
img.onload
=
function(){
var
rect
=
clacImgZoomParam(MAXWIDTH,
MAXHEIGHT,
img.offsetWidth,
img.offsetHeight)
img.width
=
rect.width
img.height
=
rect.height
//
img.style.marginLeft
=
rect.left+'px'
img.style.marginTop
=
rect.top+'px'
}
var
reader
=
new
FileReader()
reader.onload
=
function(evt){img.src
=
evt.target.result}
reader.readAsDataURL(file.files[0])
}
else
//兼容IE
{
var
sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'
file.select()
var
src
=
document.selection.createRange().text
div.innerHTML
=
'<img
id=imghead>'
var
img
=
document.getElementById('imghead')
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src
=
src
var
rect
=
clacImgZoomParam(MAXWIDTH,
MAXHEIGHT,
img.offsetWidth,
img.offsetHeight)
status
=('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height)
div.innerHTML
=
"<div
id=divhead
style='width:"+rect.width+"pxheight:"+rect.height+"pxmargin-top:"+rect.top+"px"+sFilter+src+"\"'></div>"
}
}
function
clacImgZoomParam(
maxWidth,
maxHeight,
width,
height
){
var
param
=
{top:0,
left:0,
width:width,
height:height}
if(
width>maxWidth
||
height>maxHeight
)
{
rateWidth
=
width
/
maxWidth
rateHeight
=
height
/
maxHeight
if(
rateWidth
>
rateHeight
)
{
param.width
=
maxWidth
param.height
=
Math.round(height
/
rateWidth)
}else
{
param.width
=
Math.round(width
/
rateHeight)
param.height
=
maxHeight
}
}
param.left
=
Math.round((maxWidth
-
param.width)
/
2)
param.top
=
Math.round((maxHeight
-
param.height)
/
2)
return
param
}
</script>
</head>
<body>
<div
id="preview">
<img
id="imghead"
width=100
height=100
border=0
src='<%=request.getContextPath()%>/images/defaul.jpg'>
</div>
<input
type="file"
onchange="previewImage(this)"
/>
</body>
</html>
这个一般是用css来显示特定内容的。譬如有张图片icon.png，里面有很多内容，便可以在css中这么用。
.sa
{width:20px
height:20px
overflow:hidden
background:url(icon.png)
no-repeat
-20px
-30px}
注解：
宽度和高度是控制显示范围的
overflow:hidden是确保不会有多余显示
background:url(icon.png)是使用图片作为背景显示，并且也只能作为背景显示才能达到这种做法的目的
no-repeat是不会重复，这个不是必须的，不过有会规范一些
-20px
-30px是图片的定位，显示时会将图片按这个坐标来定位
上面只是针对固定大小的显示内容来定义的，如果大小不固定，在background属性中有可能需要更改设置。不过重点是这种方式是这么使用的。
如果大小不固定，也可以这样定义，让背景自适应：
.sa
{width:auto
height:20px
overflow:hidden
background:url(icon.png)
no-repeat
right
bottom}
对于图片2(首页标签)的内容，也是这么使用的：
.a
{width:100px
height:25px
overflow:hidden
background:url(2.png)
no-repeat
left
center}
.a:hover
{background-position:right
center}
这样一来，当鼠标移到元素时，背景定位发生变化，显示的内容便由左边的变成右边的了。
不过你应该对css这方面还不是很了解，目前可能还没有很便捷的方式对这些css进行快速定义，所以也只能告诉你是这么一回事，但未必能帮得上你。
