See the results:
In the project, create An aspx page and pull the FileUpload control to preview the uploaded Image.
Copy codeThe Code is as follows:
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> select an image </legend>
<Asp: FileUpload ID = "FileUpload1" runat = "server"/>
</Fieldset>
</Td>
<Td style = "vertical-align: top; width: 90%;">
<Fieldset>
<Legend> preview </legend>
<Asp: Image ID = "Image1" runat = "server" Visible = "false"/>
</Fieldset>
</Td>
</Tr>
</Table>
</Div>
</Form>
</Body>
</Html>
In the Page_Init event, register the onchange client event as the FileUpload control.
Copy codeThe Code is as follows:
Protected void Page_Init (object sender, EventArgs e)
{
This. FileUpload1.Attributes. Add ("onchange", Page. ClientScript. GetPostBackEventReference (this. FileUpload1, "onchange "));
}
Next, Insus. NET is an axd processing document. In fact, ImageProcessFactory. cs is only a general category and only implements the IHttpHandler interface.
Copy codeThe Code is as follows:
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;
}
}
}
}
To be able to access the axd document, you need to configure it in Web. Config.
Copy codeThe Code is as follows:
View Code
<Configuration>
<System. web>
<HttpHandlers>
<Add verb = "*" path = "PreviewImage. axd" type = "Insus. NET. ImageProcessFactory"/>
</HttpHandlers>
</System. web>
</Configuration>
OK. We will go back to the aspx. cs page. In page_Load, how can we monitor whether the FileUpload control has a value change:
Copy codeThe Code is as follows:
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 );
}
}
There is a method OnchangeHandle (xxx, xxx) in Page_Load ):
Copy codeThe Code is as follows:
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 ";
}
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
