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)顯示出來了。功能很簡單，卻很實(shí)用。
預(yù)覽圖片的js代碼：
<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：
<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>
功能很簡單，代碼也很易懂，相信不用我多廢話大家也能看懂吧。感覺寫這樣的文章，真的沒啥好說的，不多說，還是把重點(diǎn)放在代碼上吧。
預(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>
功能很簡單，代碼也很易懂，相信不用我多廢話大家也能看懂吧。感覺寫這樣的文章，真的沒啥好說的，不多說，還是把重點(diǎn)放在代碼上吧。
您可能感興趣的文章:
- JS實(shí)現(xiàn)上傳圖片的三種方法并實(shí)現(xiàn)預(yù)覽圖片功能
- js實(shí)現(xiàn)圖片上傳并預(yù)覽功能
- js實(shí)現(xiàn)上傳圖片預(yù)覽的方法
- 上傳圖片預(yù)覽JS腳本 Input file圖片預(yù)覽的實(shí)現(xiàn)示例
- Javascript圖片上傳前的本地預(yù)覽實(shí)例
- js圖片上傳前預(yù)覽功能（兼容所有瀏覽器）
- js實(shí)現(xiàn)圖片上傳預(yù)覽原理分析
- js 上傳圖片預(yù)覽問題
- JS上傳前預(yù)覽圖片實(shí)例
- 如何利用原生JS實(shí)現(xiàn)圖片預(yù)覽加上傳(前后端交互)
相關(guān)文章
這篇文章主要介紹了Js模塊化的作用原理和方案，對(duì)JS模塊化感興趣的同學(xué)，可以參考下2021-04-04
本文主要介紹了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中，和JAVA類似，也提供了對(duì)于基本數(shù)據(jù)類型的包裝類型。例如Number、Boolean、String類型。下面我們就來詳細(xì)探討下吧。2015-06-06
下面小編就為大家?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ò)?，F(xiàn)在分享給大家，希望能給大家一個(gè)參考2016-03-03![JS中的==運(yùn)算： [''''] == false —>true](http://img.jbzj.com/images/xgimg/bcimg6.png)
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