首页 > 编程 > .NET > 正文

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

2020-01-18 00:19:07

字体：大中小

来源：转载

供稿：网友

看看效果：

在专案中，创建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客户端事件。

复制代码代码如下:

 
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 jquery无刷新分页插件(jquery.pagination.js)

下一篇：动态加载用户控件至DataList并为用户控件赋值实例演示

学习交流

罗技g502鼠标灵敏度怎么设置?

罗技g502鼠标灵敏度怎么设置?...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

李大脑门过安检搞笑视频各种姿势演绎默剧精彩

2020-01-15 23:11:38

《笑傲江湖4》李大脑门过安检李大脑门精彩演绎笑点十足

2020-01-15 23:00:07

淘宝独家牵手春晚：10亿补贴+清空5万人购物车

2020-01-13 22:13:23

吴忌寒卸任比特大陆法定代表人 CFO刘路遥接任

2020-01-06 22:51:58

支付宝发2019年度账单网友：2020年少花钱，多种树吧！

2020-01-06 22:38:09

重庆棒棒10年用肩膀扛出一套房，你呢？

2020-01-05 09:35:53

疑难解答

图片精选

网友关注