FileUpload上傳圖片前實(shí)現(xiàn)圖片預(yù)覽功能(附演示動(dòng)畫)

更新時(shí)間：2013年01月10日 17:18:01 作者：

FileUpload控件上傳圖片前實(shí)現(xiàn)預(yù)覽，很多網(wǎng)友都希望實(shí)現(xiàn)這樣的功能,本人總結(jié)了一下，感興趣的朋友可以參考一下，希望對(duì)您有幫助

看看效果：

在專案中，創(chuàng)建aspx頁面，拉上FileUpload控件一個(gè)Image，將用來預(yù)覽上傳時(shí)的圖片。

復(fù)制代碼代碼如下:

 
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>預(yù)覽</legend> 
<asp:Image ID="Image1" runat="server" Visible="false" /> 
</fieldset> 
</td> 
</tr> 
</table> 
</div> 
</form> 
</body> 
</html> 

在Page_Init事件中，為FileUpload控件，注冊(cè)onchange客戶端事件。

復(fù)制代碼代碼如下:

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

接下來，Insus.NET一個(gè)axd處理文檔，其實(shí)ImageProcessFactory.cs只是一個(gè)普能的類別，只實(shí)作了IHttpHandler接口。

復(fù)制代碼代碼如下:

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

為能能應(yīng)到axd文檔，需要在Web.Config中配置一下。

復(fù)制代碼代碼如下:

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

Ok，我們回到aspx.cs頁面中，要在page_Load中，怎監(jiān)控FileUpload控件是否有值變化：

復(fù)制代碼代碼如下:

 
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中有一個(gè)方法OnchangeHandle(xxx,xxx):

復(fù)制代碼代碼如下:

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

您可能感興趣的文章: