快捷導(dǎo)航

js實(shí)現(xiàn)上傳圖片之上傳前預(yù)覽圖片

更新時(shí)間：2013年03月25日 12:02:45 作者：

此功能用js實(shí)現(xiàn)，然后在fileupload控件的change事件中調(diào)用，這樣當(dāng)用fileupload選擇完圖片以后，圖片就會(huì)自動(dòng)顯示出來(lái)了，感興趣的各位可以參考下哈

上傳圖片對(duì)圖片進(jìn)行一下預(yù)覽，可以了解圖片上傳后大概會(huì)是什么樣子，此功能用js實(shí)現(xiàn)，然后在fileupload控件的change事件中調(diào)用，這樣當(dāng)用fileupload選擇完圖片以后，圖片就會(huì)自動(dòng)顯示出來(lái)了。功能很簡(jiǎn)單，卻很實(shí)用。

預(yù)覽圖片的js代碼：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function setImagePreview(docObj,localImagId,imgObjPreview) 
{ 
if(docObjfiles && docObjfiles[0]) 
{ 
//火狐下，直接設(shè)img屬性 
imgObjPreviewstyledisplay = 'block'; 
imgObjPreviewstylewidth = '300px'; 
imgObjPreviewstyleheight = '200px'; 
//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式 
imgObjPreviewsrc = windowURLcreateObjectURL(docObjfiles[0]); 
} 
else 
{ 
//IE下，使用濾鏡 
docObjselect(); 
var imgSrc = documentselectioncreateRange()text; 
//必須設(shè)置初始大小 
localImagIdstylewidth = "300px"; 
localImagIdstyleheight = "200px"; 
//圖片異常的捕捉，防止用戶修改后綴來(lái)偽造圖片 
try 
{ 
localImagIdstylefilter="progid:DXImageTransformMicrosoftAlphaImageLoader(sizingMethod=scale)"; 
localImagIdfiltersitem("DXImageTransformMicrosoftAlphaImageLoader")src = imgSrc; 
} 
catch(e) 
{ 
alert("您上傳的圖片格式不正確，請(qǐng)重新選擇!"); 
return false; 
} 
imgObjPreviewstyledisplay = 'none'; 
documentselectionempty(); 
} 
return true; 
} 
</script> 

fileupload控件及用來(lái)預(yù)覽圖片的image：

復(fù)制代碼代碼如下:

 
<div id="localImag" style="width: 300px; height: 200px"> 
<img id="preview" alt="預(yù)覽圖片" src="http://Images/noImagegif" width="300px" height="200px" /> 
</div> 
<asp:FileUpload ID="PicLoad" Width="300px" runat="server" onchange="javascript:setImagePreview(this,localImag,preview);"> 
</asp:FileUpload> 

功能很簡(jiǎn)單，代碼也很易懂，相信不用我多廢話大家也能看懂吧。感覺(jué)寫(xiě)這樣的文章，真的沒(méi)啥好說(shuō)的，不多說(shuō)，還是把重點(diǎn)放在代碼上吧。

您可能感興趣的文章:

相關(guān)文章

mpvue微信小程序的接口請(qǐng)求fly全局?jǐn)r截代碼實(shí)例
這篇文章主要介紹了mpvue微信小程序的接口請(qǐng)求fly全局?jǐn)r截代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-11-11
JS庫(kù) Highlightjs 添加代碼行號(hào)的實(shí)現(xiàn)代碼
Highlightjs是一款優(yōu)秀的代碼高亮Js組件，可以很方便地對(duì)各種語(yǔ)言編寫(xiě)的代碼添加語(yǔ)法高亮樣式。本文重點(diǎn)給大家介紹Highlightjs 添加代碼行號(hào)的實(shí)現(xiàn)代碼，需要的朋友參考下吧
2017-09-09
前端使用JSON.stringify實(shí)現(xiàn)深拷貝的巨坑詳解
這篇文章主要為大家介紹了JSON.stringify實(shí)現(xiàn)深拷貝的巨坑詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
微信提示在瀏覽器打開(kāi) 效果實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了微信提示在瀏覽器打開(kāi) 效果實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
javascript:void(0)用法及常見(jiàn)問(wèn)題分析
javascript:void(0) 在某些情況下會(huì)有瀏覽器不兼容的bug。下面我們先來(lái)看下javascript:void(0) 的基礎(chǔ)介紹及用法，然后再來(lái)看使用它會(huì)出現(xiàn)什么問(wèn)題，該怎么解決，感興趣的朋友跟隨小編一起看看吧
2023-10-10
javascript 自定義事件初探
"事件機(jī)制可以使程序邏輯更加符合現(xiàn)實(shí)世界，在JavaScript 中很多對(duì)象都有自己的事件，例如按鈕就有onclick 事件，下拉列表框就有onchange 事件，通過(guò)這些事件可以方便編程。
2009-08-08
Object.defineProperty()函數(shù)之屬性描述對(duì)象
這篇文章主要介紹了Object.defineProperty()函數(shù)之屬性描述對(duì)象，JavaScript?提供了一個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)，用來(lái)描述對(duì)象的屬性，控制它的行為，比如該屬性是否可寫(xiě)、可遍歷等等。這個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)稱為:屬性描述對(duì)象
2022-09-09
鼠標(biāo)放在圖片上顯示大圖的JS代碼
將圖片查詢出來(lái)之后，還需要加一個(gè)查看大圖的功能，于是就用js寫(xiě)了一個(gè)方法，然后在image的onmouseover事件中調(diào)用此方法，這樣在鼠標(biāo)懸浮在小圖上面的時(shí)候，其大圖就會(huì)自動(dòng)的顯示出來(lái)。
2013-03-03
JavaScript實(shí)現(xiàn)鼠標(biāo)移入隨機(jī)變換顏色
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)鼠標(biāo)移入隨機(jī)變換顏色的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
Javascript函數(shù)式編程簡(jiǎn)單介紹
什么是函數(shù)式編程？根據(jù)百度百科的描述，“函數(shù)式編程是種編程典范，它將電腦運(yùn)算視為函數(shù)的計(jì)算。函數(shù)編程語(yǔ)言最重要的基礎(chǔ)是 λ 演算（lambda calculus）。而且λ演算的函數(shù)可以接受函數(shù)當(dāng)作輸入（參數(shù)）和輸出（返回值）?！?/div> 2015-10-10