在網站程序中，經常會需要進行圖片的上傳，很多時候我們也需要在選擇圖片后將選擇的圖片作為縮略圖顯示在頁面上，可以直接在頁面上查看選擇的是否是自己想要的圖片或圖片是否選擇錯誤。以往通常的做法事先將圖片上傳到網站程序目錄中，然后再把圖片的網站圖徑給Image控件。這樣做會有個弊端，那就是如果我選擇的圖怎不是想要的，想重新選擇一經圖片，那我豈不是要把之前上傳的刪了。很顯示這樣有些多此一舉。有人可能會問為什么我們在選擇圖片后不直接把上傳控件上的路徑給Image控件呢？因為此時你的圖片路徑是本地路徑，比如D:\tupian\test.jpg,如果你直接賦值的話瀏覽器是不允許的。
那么我們要如何在上傳控件選擇圖片后，立馬將圖片顯示在頁面上呢，在這里我提到一個流的概念，我們可以在網站里寫一個imagehandler一般處理程序，這個處理程序是專們向請求方輸出圖片流。這樣我們中要把這個圖片流給Image控件就可以了，那么我們具體如何做呢，首先當我選擇一個圖片后，在上傳控件的onchange事件里去改變Image控件的src, 並且讓這個src指向這個imagehandler程序，我們需要把本地圖片路徑地址傳給這個handler程序，讓handler把圖片轉換成流返回給Image。好了，具體代碼如下：
前台代碼：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="addproduct.aspx.cs" Inherits="WHClimate.WebBack.SubProduct" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <title></title> 7 <link rel="stylesheet" type="text/css" href="css/css.css" /> 8 <script language="JavaScript" type="text/javascript"> 9 var patn = /\.(jpg|gif|png|jpeg|dib|jpe|pcx|tiff|tif)$/i; 10 function previewLogo(upkind, imgkind) { 11 var filelogo = document.getElementById(upkind); 12 var imagesrc = document.getElementById(imgkind); 13 if (!filelogo || !filelogo.value) 14 return; 15 if (patn.test(filelogo.value)) { 16 imagesrc.src = "ImageHandler.ashx?path=" + filelogo.value; 17 } 18 else { 19 filelogo.outerHTML += ""; 20 alert("您選擇的圖像文件格式不正確。"); 21 } 22 } 23 </script> 24 </head> 25 <body onkeydown= "if(event.keycode==13)return false;"> 26 <form id="form1" runat="server"> 27 <table width="900" border="0" align="center" cellpadding="8" cellspacing="1" class="table_01"> 28 <tr> 29 <td align="right" class="td_02"> 30 <strong>圖片上傳：</strong> 31 </td> 32 <td class="td_03"> 33 <input id="fileUpload" type="file" onchange='previewLogo("fileUpload","thumbnail"); ' /> 34 </td> 35 </tr> 36 37 <tr> 38 <td width="120" align="right" class="td_02"> 39 <strong>縮略圖：</strong> 40 </td> 41 <td class="td_03"> 42 <img alt="暫未圖片顯示" src="" id="thumbnail" runat="server" width="250" /> 43 </td> 44 </tr> 45 </table> 46 </form> 47 </body> 48 </html>
后台ImageHandler.ashx代碼：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Drawing; 6 using System.Drawing.Imaging; 7 8 namespace WHClimate.WebBack 9 { 10 /// <summary> 11 /// Summary description for ImageHandler 12 /// </summary> 13 public class ImageHandler : IHttpHandler 14 { 15 16 public void ProcessRequest(HttpContext context) 17 { 18 string path = context.Request.QueryString.Get("path"); 19 Image image = Image.FromFile(path); 20 context.Response.Clear(); 21 context.Response.ClearHeaders(); 22 image.Save(context.Response.OutputStream, ImageFormat.Jpeg); 23 context.Response.ContentType = "image/jpeg"; 24 HttpContext.Current.ApplicationInstance.CompleteRequest(); 25 } 26 27 public bool IsReusable 28 { 29 get 30 { 31 return false; 32 } 33 } 34 } 35 }