FileUpload上传图片前实现图片预览功能(附演示动画)_asp.net教程-查字典教程网
FileUpload上传图片前实现图片预览功能(附演示动画)
FileUpload上传图片前实现图片预览功能(附演示动画)
发布时间:2017-01-07 来源:查字典编辑
摘要:看看效果:在专案中,创建aspx页面,拉上FileUpload控件一个Image,将用来预览上传时的图片。复制代码代码如下:ViewCode...

看看效果:

在专案中,创建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>

<fieldset>

<legend>选择图片</legend>

<asp:FileUpload ID="FileUpload1" runat="server" />

</fieldset>

</td>

<td>

<fieldset>

<legend>预览</legend>

<asp:Image ID="Image1" runat="server" Visible="false" />

</fieldset>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

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

复制代码 代码如下:

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

}

}

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新asp.net教程学习
    热门asp.net教程学习
    编程开发子分类