FileUpload上传图片前实现图片预览功能(附演示动画

FileUpload控件上传图片前实现预览功能与实现参考

许多网友都希望在上传图片前能预览到图片效果，今天我来为大家介绍一下如何在ASP.NET的Web表单应用中实现这一功能。这不仅能让用户体验更流畅，也能在上传前确保图片格式和质量的正确性。如果你感兴趣，不妨参考以下步骤，希望对你有所帮助。

一、页面布局与控件设置

在ASPX页面中添加FileUpload控件和一个Image控件。FileUpload控件用于选择待上传的图片，而Image控件则用于展示所选图片的预览效果。页面布局大致如下：

```html

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

```

二、事件处理与逻辑实现

接下来在Page_Init事件中为FileUpload控件注册onchange客户端事件。这样当用户选择文件后能够触发该事件，进而进行图片预览的逻辑处理。代码如下：

```csharp

protected void Page_Init(object sender, EventArgs e) {

this.FileUpload1.Attributes.Add("onchange", Page.ClientScript.GetPostBackEventReference(this.FileUpload1, "onchange"));

在 Insus.NET 命名空间中，有一个名为 ImageProcessFactory 的类，它实现了 IHttpHandler 和 IRequiresSessionState 接口。这个类主要负责处理图像相关的请求。让我们深入了解下这个类的实现细节。

ImageProcessFactory 的构造函数目前尚未添加任何逻辑，但可以根据需要进行扩展。它的主要方法是 ProcessRequest，该方法根据 HttpContext 对象 context 来处理请求。它首先检查 Session 中的 UploadBytes 是否包含数据，如果有数据，那么就把这些数据通过 context.Response.BinaryWrite 方法写入响应流中。这个方法被用来处理上传的图片数据，并将图片数据发送到客户端预览。这个类还实现了 IsReusable 属性，用来判断该对象是否可以被重用，这里我们设置为 false。

为了在Web服务器上正确响应以 ".axd" 为后缀的文档请求，我们需要在 Web.config 文件中进行配置。配置的内容主要是添加一个 httpHandlers 节，指定路径为 "PreviewImage.axd"，类型为 Insus.NET.ImageProcessFactory。这样当服务器接收到以 "PreviewImage.axd" 为路径的请求时，就会调用 ImageProcessFactory 类来处理这个请求。

接下来，我们转向 aspx.cs 页面中的代码。在 Page_Load 方法中，我们需要监控 FileUpload 控件的值是否发生变化。在发生回发（PostBack）时，我们可以通过 Request.Params 获取触发事件源和事件参数，然后调用 OnchangeHandle 方法进行处理。在 OnchangeHandle 方法中，我们首先检查触发事件源是否是 FileUpload1 控件以及事件是否是 onchange 事件。如果是的话，我们就将 FileUpload 控件中的文件字节保存到 Session 中，并设置 Image 控件的可见性以及其图片 URL 为 "~/PreviewImage.axd"，实现图片的实时预览功能。