Asp.net 2.0 no-refreshing Image Upload + echo

Simple three-step Image Upload without refreshing: Pay attention to the upload. For verification during the upload, the size, size, and format of the image are different from those of the image. Solve the problem by yourself. If I do, it will also be pasted.

Good compatibility: FF, CH, IE, And cheetah can all be implemented. If the ECHO is displayed. Of course it is successful.

After several days of continuous exploitation, I finally got the second goods out. It's really painstaking. However, the moments are quite fun.

Step 1: We need to load several JS libraries.
Jquery library.
Jquery. form. js library.

Download the two libraries and reference them to the page.

The following is the JS Code on the page:
Function upload (){
Var options = {
Type: "POST", // Of course, this is the transfer method
Url: '../Include/Files. ashx', // path of the general Handler
Success: function (msg) {// Response Parameter
$ ("# Server_img"). attr ("src", msg); // echo the image.
}
};
// Pass options to ajaxForm
$ ('# AspnetForm'). ajaxSubmit (options );
}

Step 2: generally process the code in the program

Public void ProcessRequest (HttpContext context)
{
HttpFileCollection files = context. Request. Files; // obtain the object From
If (files. Count> 0)
{
String path = ""; // path string
Random rnd = new Random ();
For (int I = 0; I <files. Count; I ++)
{
HttpPostedFile file = files [I]; // get the file object
If (file. ContentLength> 0)
{
String fileName = file. FileName;
String extension = Path. GetExtension (fileName );
Int num = rnd. Next (5000,100 00); // file name
Path = "../UserFiles/temp/" + num. ToString () + extension;
File. SaveAs (System. Web. HttpContext. Current. Server. MapPath (path); // save the file.
}
}
Context. Response. Write (path); // return the path of the stored file for ECHO.
}
}

Step 3: code in html or aspx.
The following code inserts any location in html or aspx. All can be implemented.

// used to display an image
<Asp: FileUpload ID = "Up_load" runat = "server" onchange = "upload ()" ontextchange = "upload ()"/> // upload an image, automatic, the two events are designed to ensure compatibility with all browsers.