<!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;"
οnchange= "javascript:setImagePreview();" ></td>
</tr> </tbody> </table> </body> </html> |
js图片预览
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.