jsp中實現(xiàn)上傳圖片即時顯示效果功能
更新時間:2013年01月04日 10:18:56 作者:
上傳圖片時即時顯示圖片效果,這在項目開發(fā)中時很常見的一項功能,接下來介紹此功能的實現(xiàn)過程,有需要的朋友可以參考下
復(fù)制代碼 代碼如下:
<script>
function setImagePreview() {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files && docObj.files[0]){
//火狐下,直接設(shè)img屬性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '300px';
imgObjPreview.style.height = '120px';
//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");
//必須設(shè)置初始大小
localImagId.style.width = "250px";
localImagId.style.height = "200px";
//圖片異常的捕捉,防止用戶修改后綴來偽造圖片
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>
<body>
<input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">
<p><div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div></p>
相關(guān)文章
JSP上傳excel及excel插入至數(shù)據(jù)庫的方法
這篇文章主要介紹了JSP上傳excel及excel插入至數(shù)據(jù)庫的方法,涉及JSP文件上傳及針對excel的讀取、寫入數(shù)據(jù)庫等操作技巧,需要的朋友可以參考下2015-10-10
在JSP中訪問MS SQL Server數(shù)據(jù)庫
在JSP中訪問MS SQL Server數(shù)據(jù)庫...2006-10-10
JSP中EL表達(dá)式用法_動力節(jié)點Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JSP頁面中支持使用的EL表達(dá)式用法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07

