<!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圖片預覽
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.