FileUpload上传图片前首先预览一下

看看效果：

 

在专案中，创建aspx页面，拉上FileUpload控件一个Image，将用来预览上传时的图片。

View Code

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " Default2.aspx.cs "  Inherits = " Default2 "   %>

<! DOCTYPE html >

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title ></ title >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
         < div >
             < table >
                 < tr >
                     < td  style ="vertical-align: top; width: 10%;" >
                         < fieldset >
                             < legend >选择图片 </ legend >
                             < asp:FileUpload  ID ="FileUpload1"  runat ="server"   />
                         </ fieldset >
                     </ td >
                     < td  style ="vertical-align: top; width: 90%;" >
                         < fieldset >
                             < legend >预览 </ legend >
                             < asp:Image  ID ="Image1"  runat ="server"  Visible ="false"   />
                         </ fieldset >
                     </ td >
                 </ tr >
             </ table >           
         </ div >
     </ form >
</ body >
</ html >

 

在Page_Init事件中，为FileUpload控件，注册onchange客户端事件。

View Code

  protected  void Page_Init( object sender, EventArgs e)
    {   
        this.FileUpload1.Attributes.Add( " onchange ", Page.ClientScript.GetPostBackEventReference( this.FileUpload1,  " onchange "));
    }

 

接下来，Insus.NET一个axd处理文档，其实ImageProcessFactory.cs只是一个普能的类别，只实作了IHttpHandler接口。

ImageProcessFactory.cs

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.SessionState;


///   <summary>
///  Summary description for ImageProcessFactory
///   </summary>
namespace Insus.NET
{
     public  class ImageProcessFactory : IHttpHandler,IRequiresSessionState
    {
         public ImageProcessFactory()
        {
             //
             //  TODO: Add constructor logic here
             //
        }

         public  void ProcessRequest(HttpContext context)
        {
             // Checking whether the imagebytes session variable have anything else not doing anything

             if ((context.Session[ " UploadBytes "]) !=  null)
            {
                 byte[] buffer = ( byte[])(context.Session[ " UploadBytes "]);               
                context.Response.BinaryWrite(buffer); 

            }
        }

         public  bool IsReusable
        {
             get
            {
                 return  false;
            }
        }
    }
}

 

为能能应到axd文档，需要在Web.Config中配置一下。 

View Code

< configuration > 
   < system.web >   
     < httpHandlers >
       < add  verb ="*"  path ="PreviewImage.axd"  type ="Insus.NET.ImageProcessFactory" />
     </ httpHandlers >    
   </ system.web >
</ configuration >

 

Ok，我们回到aspx.cs页面中，要在page_Load中，怎监控FileUpload控件是否有值变化：

View Code

  protected  void Page_Load( object sender, EventArgs e)
    {
         if (IsPostBack)
        {
             var ctrl = Request.Params[Page.postEventSourceID];
             var args = Request.Params[Page.postEventArgumentID];

            OnchangeHandle(ctrl, args);
        }
    }

 

在Page_Load中有一个方法OnchangeHandle(xxx,xxx):

View Code

  private  void OnchangeHandle( string ctrl,  string args)
    {
         if (ctrl ==  this.FileUpload1.UniqueID && args ==  " onchange ")
        {
             this.Image1.Visible =  true;

            Session[ " UploadBytes "] =  this.FileUpload1.FileBytes;           
             this.Image1.ImageUrl =  " ~/PreviewImage.axd " ;            
        }
    }