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)顯示出來了，感興趣的各位可以參考下哈

上傳圖片對(duì)圖片進(jìn)行一下預(yù)覽，可以了解圖片上傳后大概會(huì)是什么樣子，此功能用js實(shí)現(xiàn)，然后在fileupload控件的change事件中調(diào)用，這樣當(dāng)用fileupload選擇完圖片以后，圖片就會(huì)自動(dòng)顯示出來了。功能很簡(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"; 
//圖片異常的捕捉，防止用戶修改后綴來偽造圖片 
try 
{ 
localImagIdstylefilter="progid:DXImageTransformMicrosoftAlphaImageLoader(sizingMethod=scale)"; 
localImagIdfiltersitem("DXImageTransformMicrosoftAlphaImageLoader")src = imgSrc; 
} 
catch(e) 
{ 
alert("您上傳的圖片格式不正確，請(qǐng)重新選擇!"); 
return false; 
} 
imgObjPreviewstyledisplay = 'none'; 
documentselectionempty(); 
} 
return true; 
} 
</script> 

fileupload控件及用來預(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)單，代碼也很易懂，相信不用我多廢話大家也能看懂吧。感覺寫這樣的文章，真的沒啥好說的，不多說，還是把重點(diǎn)放在代碼上吧。

您可能感興趣的文章:

相關(guān)文章

詳解Js模塊化的作用原理和方案
這篇文章主要介紹了Js模塊化的作用原理和方案，對(duì)JS模塊化感興趣的同學(xué)，可以參考下
2021-04-04
JS逆向之愛奇藝滑塊加密的實(shí)現(xiàn)
本文主要介紹了JS逆向之愛奇藝滑塊加密的實(shí)現(xiàn)，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
微信小程序?qū)崿F(xiàn)滴滴導(dǎo)航tab切換效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滴滴導(dǎo)航tab切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
淺談javascript中基本包裝類型
在JavaScript中，和JAVA類似，也提供了對(duì)于基本數(shù)據(jù)類型的包裝類型。例如Number、Boolean、String類型。下面我們就來詳細(xì)探討下吧。
2015-06-06
基于ES6作用域和解構(gòu)賦值詳解
下面小編就為大家?guī)硪黄贓S6作用域和解構(gòu)賦值詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
盤點(diǎn)javascript 正則表達(dá)式中中括號(hào)的【坑】
下面小編就為大家?guī)硪黄P點(diǎn)javascript 正則表達(dá)式中中括號(hào)的【坑】。小編覺得總結(jié)的不錯(cuò)。現(xiàn)在分享給大家，希望能給大家一個(gè)參考
2016-03-03
JS中的==運(yùn)算： [''''] == false —>true
這篇文章主要介紹了JS中的==運(yùn)算： [''] == false —>true的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07
javascript實(shí)現(xiàn)仿IE頂部的可關(guān)閉警告條
仿windows IE頂部的敬告工具條，帶關(guān)閉按鈕，設(shè)計(jì)還算精美，你完全可以用到自己的網(wǎng)頁用于顯示提示等方面，有需要的小伙伴可以參考下。
2015-05-05
javascript實(shí)現(xiàn)帶下拉子菜單的導(dǎo)航菜單效果
這篇文章主要介紹了javascript實(shí)現(xiàn)帶下拉子菜單的導(dǎo)航菜單效果的方法,涉及javascript操作頁面元素與樣式的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
JS基礎(chǔ)之undefined與null的區(qū)別分析
在JavaScript開發(fā)中，被人問到：null與undefined到底有啥區(qū)別？一時(shí)間不好回答，特別是undefined，因?yàn)檫@涉及到undefined的實(shí)現(xiàn)原理。
2011-08-08