jsp中實(shí)現(xiàn)上傳圖片即時(shí)顯示效果功能
更新時(shí)間:2013年01月04日 10:18:56 作者:
上傳圖片時(shí)即時(shí)顯示圖片效果,這在項(xiàng)目開(kāi)發(fā)中時(shí)很常見(jiàn)的一項(xiàng)功能,接下來(lái)介紹此功能的實(shí)現(xiàn)過(guò)程,有需要的朋友可以參考下
復(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";
//圖片異常的捕捉,防止用戶修改后綴來(lái)偽造圖片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}catch(e){
alert("您上傳的圖片格式不正確,請(qǐng)重新選擇!");
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>
您可能感興趣的文章:
- JS實(shí)現(xiàn)上傳圖片的三種方法并實(shí)現(xiàn)預(yù)覽圖片功能
- js實(shí)現(xiàn)上傳圖片預(yù)覽的方法
- 上傳圖片預(yù)覽JS腳本 Input file圖片預(yù)覽的實(shí)現(xiàn)示例
- 微信JSSDK上傳圖片
- js實(shí)現(xiàn)上傳圖片之上傳前預(yù)覽圖片
- js實(shí)現(xiàn)ctrl+v粘貼上傳圖片(兼容chrome、firefox、ie11)
- Javascript 驗(yàn)證上傳圖片大小[客戶端]
- JS上傳圖片前的限制包括(jpg jpg gif及大小高寬)等
- js 上傳圖片預(yù)覽問(wèn)題
- js實(shí)現(xiàn)自定義下拉框
相關(guān)文章
jsp頁(yè)面中表達(dá)式語(yǔ)言中的$符號(hào)不起作用的解決方法
下面小編就為大家?guī)?lái)一篇jsp頁(yè)面中表達(dá)式語(yǔ)言中的$符號(hào)不起作用的解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10JSP上傳excel及excel插入至數(shù)據(jù)庫(kù)的方法
這篇文章主要介紹了JSP上傳excel及excel插入至數(shù)據(jù)庫(kù)的方法,涉及JSP文件上傳及針對(duì)excel的讀取、寫(xiě)入數(shù)據(jù)庫(kù)等操作技巧,需要的朋友可以參考下2015-10-10在JSP中訪問(wèn)MS SQL Server數(shù)據(jù)庫(kù)
在JSP中訪問(wèn)MS SQL Server數(shù)據(jù)庫(kù)...2006-10-10JSP中EL表達(dá)式用法_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JSP頁(yè)面中支持使用的EL表達(dá)式用法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07JSP頁(yè)面文件中base標(biāo)記用法實(shí)例分析
這篇文章主要介紹了JSP頁(yè)面文件中base標(biāo)記用法,以實(shí)例形式較為詳細(xì)的分析了JSP中base標(biāo)記的功能與具體使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10