程式師世界 >> 編程語言 >> .NET網頁編程 >> ASP.NET >> 關於ASP.NET >> 小技巧：圖片在上傳之前先預覽，無需先上傳到服務器上

小技巧：圖片在上傳之前先預覽，無需先上傳到服務器上

編輯：關於ASP.NET

我在網上看到好多人問如何使用FileUpload上傳之前，先預覽圖片，前提條件，不允許先上傳到服務器上！因為大多搜索的結果實現的方法都是先上傳到服務器上，然後顯示，如果不確定上傳，就刪除，這樣的風險太大，性能也消耗很大！下面的代碼告訴大家我們不需要先把圖片上傳到服務器上就可以預覽了，是不是很酷！不說了，上代碼！

<%@ Page Language="C#" %>
　　
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
　　
<script runat="server">
　　
</script>
　　
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
　　<title>Preview Image In FileUpload</title>
　　<style type="text/css">
　　　　#newPreview
　　　　{
　　　　　　filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
　　　　}
　　</style>
</head>
<body>
　　
　　<script language="javascript" type="text/javascript">
　　　　function PreviewImg(imgFile)
　　　　{　　
　　　　　　var newPreview = document.getElementById("newPreview");
　　　　　　newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = 

imgFile.value;
　　　　　　newPreview.style.width = "80px";
　　　　　　newPreview.style.height = "60px";
　　　　}
　　
　　</script>
　　
　　<form id="form2" runat="server">
　　<div>
　　　　<asp:FileUpload ID="FileUpload1" runat="server" onchange="PreviewImg(this)" />
　　</div>
　　<div id="newPreview">
　　</div>
　　<input type="file" onchange="document.getElementById('img').src=this.value" />
　　<img id="img">
　　</form>
</body>
</html>

當然，如果你有更好的方法，也可以共享出來和大伙分享，謝謝了。