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

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

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

上傳圖片對圖片進行一下預覽，可以了解圖片上傳后大概會是什么樣子，此功能用js實現(xiàn)，然后在fileupload控件的change事件中調(diào)用，這樣當用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> 

功能很簡單，代碼也很易懂，相信不用我多廢話大家也能看懂吧。感覺寫這樣的文章，真的沒啥好說的，不多說，還是把重點放在代碼上吧。

您可能感興趣的文章: