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 UploadBytes 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" ;            
        }
    }

  

 


以下内容于2016-02-16 13:56分添加:
一段时间以来,得到许多网友关注这个功能,但网友在测试时,均不能成功执行。
有几点需要注意的,ImageProcessFactory.cs只是一个普通的类别。而不是一般处理程序。另外在较高的.net版下测试时,它会出现下面异常:



它会出现一个异常:



解决这个问题,你可以尝试下面的步骤来进行:


Integrated改为Classic

 

 当你完成上面的修改之后,网站程序文件下会生成一个xml格式的文件vwd.webinfo:


另外Insus.NET再附加最新的写的源程序,可从下面链接下载:
http://download.cnblogs.com/insus/ASPDOTNET/AxdDemo.rar

 

posted @ 2012-11-13 22:50  Insus.NET  阅读(27047)  评论(15编辑  收藏  举报