First, establish the Default.aspx page
[CSharp]View PlainCopy
- <%@ page language="C #" autoeventwireup="true" codefile="Default.aspx.cs" inherits="_default"% >
- <! DOCTYPE HTML public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">
- "http://www.w3.org/1999/xhtml" >
- "Server" >
- <title>ajax Photo Upload </title>
- <script src="js/jquery-1.3.2.min.js" type="Text/javascript" ></script>
- <script src="js/jquery.form.js" type="Text/javascript" ></script>
- <script type="Text/javascript" >
- function upload () {
- var path = document.getElementById ("File1"). Value;
- var img = document.getElementById ("IMG1");
- if ($.trim (path) = ="") {
- Alert ("Please select a file to upload");
- return;
- }
- $ ("#form1"). Ajaxsubmit ({
- Success:function (str) {
- if (str!=null && str!="undefined") {
- if (str = = "1") {alert ("upload succeeded");d Ocument.getelementbyid ("img1"). src="Images/logo.jpg?" +new Date (); / * Refresh picture after upload */}
- Else if (str=="2") {alert ("only images in JPG format can be uploaded");}
- Else if (str=="3") {Alert ("picture cannot be greater than 1M");}
- Else if (str=="4") {Alert ("Please select File to upload");}
- else {alert (' operation failed! ‘);}
- }
- Else alert (' operation failed! ‘);
- },
- Error:function (Error) {alert (error);},
- URL:' handler.ashx ',/ * Set the page to which post is submitted * /
- Type: "post",/ * Set the form to submit by post method * /
- DataType: "text"/ * Set return value type is text * /
- });
- }
- </script>
- <body>
- <form id="Form1" runat= "Server" >
- <input id="File1" name="File1" type="file"/>
- <input id="Iptup" type="button" value="upload logo" onclick="upload ()" />
- <img id="img1" alt="website logo" src=" images/weblogo.jpg"/>
- </form>
- </body>
Second, a new general processing file Handler.ashx
[CSharp]View PlainCopy
- <%@ WebHandler language="C #" class="Handler"%>
- Using System;
- Using System.Web;
- Public class Handler:ihttphandler {
- public void ProcessRequest (HttpContext context) {
- Httppostedfile _upfile = context. request.files["File1"];
- if (_upfile = = null)
- {
- Responsewriteend (Context, "4"); Please select a file to upload
- }
- Else
- {
- string fileName = _upfile. FileName; /* Get file Name: C:\Documents and settings\administrator\ desktop \123.jpg*/
- string suffix = filename.substring (Filename.lastindexof (".") + 1). ToLower (); /* Get the suffix name and convert to lowercase: jpg*/
- int bytes = _upfile. ContentLength; //Gets the byte size of the file
- if (suffix! = "jpg")
- Responsewriteend (Context, "2"); //can only upload jpg format pictures
- if (bytes > 1024x768 * 1024x768)
- Responsewriteend (Context, "3"); //Picture cannot be greater than 1M
- _upfile. SaveAs (HttpContext.Current.Server.MapPath ("~/images/logo.jpg")); Save Picture
- Responsewriteend (Context, "1"); //Upload successful
- }
- }
- private void Responsewriteend (HttpContext context, string msg)
- {
- Context. Response.Write (msg);
- Context. Response.End ();
- }
- public bool IsReusable {
- get {
- return false;
- }
- }
- }
Project Structure diagram
Ajax image upload (ASP. +jquery+ashx)
