js實現(xiàn)上傳圖片之上傳前預覽圖片
更新時間：2013年03月25日 12:02:45 作者：
此功能用js實現(xiàn)，然后在fileupload控件的change事件中調用，這樣當用fileupload選擇完圖片以后，圖片就會自動顯示出來了，感興趣的各位可以參考下哈
上傳圖片對圖片進行一下預覽，可以了解圖片上傳后大概會是什么樣子，此功能用js實現(xiàn)，然后在fileupload控件的change事件中調用，這樣當用fileupload選擇完圖片以后，圖片就會自動顯示出來了。功能很簡單，卻很實用。
預覽圖片的js代碼：
<script type="text/javascript">
function setImagePreview(docObj,localImagId,imgObjPreview)
{
if(docObjfiles && docObjfiles[0])
{
//火狐下，直接設img屬性
imgObjPreviewstyledisplay = 'block';
imgObjPreviewstylewidth = '300px';
imgObjPreviewstyleheight = '200px';
//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式
imgObjPreviewsrc = windowURLcreateObjectURL(docObjfiles[0]);
}
else
{
//IE下，使用濾鏡
docObjselect();
var imgSrc = documentselectioncreateRange()text;
//必須設置初始大小
localImagIdstylewidth = "300px";
localImagIdstyleheight = "200px";
//圖片異常的捕捉，防止用戶修改后綴來偽造圖片
try
{
localImagIdstylefilter="progid:DXImageTransformMicrosoftAlphaImageLoader(sizingMethod=scale)";
localImagIdfiltersitem("DXImageTransformMicrosoftAlphaImageLoader")src = imgSrc;
}
catch(e)
{
alert("您上傳的圖片格式不正確，請重新選擇!");
return false;
}
imgObjPreviewstyledisplay = 'none';
documentselectionempty();
}
return true;
}
</script>
fileupload控件及用來預覽圖片的image：
<div id="localImag" style="width: 300px; height: 200px">
<img id="preview" alt="預覽圖片" 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>
功能很簡單，代碼也很易懂，相信不用我多廢話大家也能看懂吧。感覺寫這樣的文章，真的沒啥好說的，不多說，還是把重點放在代碼上吧。
預覽圖片的js代碼：
復制代碼 代碼如下:
<script type="text/javascript">
function setImagePreview(docObj,localImagId,imgObjPreview)
{
if(docObjfiles && docObjfiles[0])
{
//火狐下，直接設img屬性
imgObjPreviewstyledisplay = 'block';
imgObjPreviewstylewidth = '300px';
imgObjPreviewstyleheight = '200px';
//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式
imgObjPreviewsrc = windowURLcreateObjectURL(docObjfiles[0]);
}
else
{
//IE下，使用濾鏡
docObjselect();
var imgSrc = documentselectioncreateRange()text;
//必須設置初始大小
localImagIdstylewidth = "300px";
localImagIdstyleheight = "200px";
//圖片異常的捕捉，防止用戶修改后綴來偽造圖片
try
{
localImagIdstylefilter="progid:DXImageTransformMicrosoftAlphaImageLoader(sizingMethod=scale)";
localImagIdfiltersitem("DXImageTransformMicrosoftAlphaImageLoader")src = imgSrc;
}
catch(e)
{
alert("您上傳的圖片格式不正確，請重新選擇!");
return false;
}
imgObjPreviewstyledisplay = 'none';
documentselectionempty();
}
return true;
}
</script>
fileupload控件及用來預覽圖片的image：
復制代碼 代碼如下:
<div id="localImag" style="width: 300px; height: 200px">
<img id="preview" alt="預覽圖片" 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>
功能很簡單，代碼也很易懂，相信不用我多廢話大家也能看懂吧。感覺寫這樣的文章，真的沒啥好說的，不多說，還是把重點放在代碼上吧。
相關文章
這篇文章主要介紹了mpvue微信小程序的接口請求fly全局攔截代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-11-11
JS庫 Highlightjs 添加代碼行號的實現(xiàn)代碼
Highlightjs是一款優(yōu)秀的代碼高亮Js組件，可以很方便地對各種語言編寫的代碼添加語法高亮樣式。本文重點給大家介紹Highlightjs 添加代碼行號的實現(xiàn)代碼，需要的朋友參考下吧2017-09-09
前端使用JSON.stringify實現(xiàn)深拷貝的巨坑詳解
這篇文章主要為大家介紹了JSON.stringify實現(xiàn)深拷貝的巨坑詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了微信提示 在瀏覽器打開 效果實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
javascript:void(0) 在某些情況下會有瀏覽器不兼容的bug。下面我們先來看下javascript:void(0) 的基礎介紹及用法，然后再來看使用它會出現(xiàn)什么問題，該怎么解決，感興趣的朋友跟隨小編一起看看吧2023-10-10
"事件機制可以使程序邏輯更加符合現(xiàn)實世界，在JavaScript 中很多對象都有自己的事件，例如按鈕就有onclick 事件，下拉列表框就有onchange 事件，通過這些事件可以方便編程。2009-08-08
Object.defineProperty()函數(shù)之屬性描述對象
這篇文章主要介紹了Object.defineProperty()函數(shù)之屬性描述對象，JavaScript?提供了一個內部數(shù)據結構，用來描述對象的屬性，控制它的行為，比如該屬性是否可寫、可遍歷等等。這個內部數(shù)據結構稱為:屬性描述對象2022-09-09
將圖片查詢出來之后，還需要加一個查看大圖的功能，于是就用js寫了一個方法，然后在image的onmouseover事件中調用此方法，這樣在鼠標懸浮在小圖上面的時候，其大圖就會自動的顯示出來。2013-03-03
這篇文章主要給大家介紹了關于JavaScript實現(xiàn)鼠標移入隨機變換顏色的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
什么是函數(shù)式編程？根據百度百科的描述，“函數(shù)式編程是種編程典范，它將電腦運算視為函數(shù)的計算。函數(shù)編程語言最重要的基礎是 λ 演算（lambda calculus）。而且λ演算的函數(shù)可以接受函數(shù)當作輸入（參數(shù)）和輸出（返回值）?！?/div> 2015-10-10最新評論