<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>By:DragonDean</title>
<script type=
"text/javascript"
>
//下面用于图片上传预览功能
function
setImagePreview(avalue) {
var
docObj=document.getElementById(
"doc"
);
var
imgObjPreview=document.getElementById(
"preview"
);
if
(docObj.files &&docObj.files[0])
{
//火狐下,直接设img属性
imgObjPreview.style.display =
'block'
;
imgObjPreview.style.width =
'150px'
;
imgObjPreview.style.height =
'180px'
;
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else
{
//IE下,使用滤镜
docObj.select();
var
imgSrc = document.selection.createRange().text;
var
localImagId = document.getElementById(
"localImag"
);
//必须设置初始大小
localImagId.style.width =
"150px"
;
localImagId.style.height =
"180px"
;
//图片异常的捕捉,防止用户修改后缀来伪造图片
try
{
localImagId.style.filter=
"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"
;
localImagId.filters.item(
"DXImageTransform.Microsoft.AlphaImageLoader"
).src = imgSrc;
}
catch
(e)
{
alert(
"您上传的图片格式不正确,请重新选择!"
);
return
false
;
}
imgObjPreview.style.display =
'none'
;
document.selection.empty();
}
return
true
;
}
</script>
</head>
<body>
<table width=
"100%"
border=
"0"
cellspacing=
"0"
cellpadding=
"0"
>
<tbody>
<tr>
<td height=
"101"
align=
"center"
>
<div id=
"localImag"
><img id=
"preview"
src=
""
width=
"150"
height=
"180"
style=
"display: block; width: 150px; height: 180px;"
></div>
</td>
</tr>
<tr>
<td align=
"center"
style=
"padding-top:10px;"
><input type=
"file"
name=
"file"
id=
"doc"
style=
"width:150px;"
onchange=
"javascript:setImagePreview();"
></td>
</tr>
</tbody>
</table>
</body>
</html>
|
js图片预览
最新推荐文章于 2024-06-20 10:53:59 发布