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