The realization method and thought of asp.net file upload and display progress bar without refresh

Believe that through the ASP.net server control upload files in simple, through the Ajaxtoolkit control to upload progress is not difficult, why do they have to toil to achieve it? I do not deny the "copycat", but I personally prefer to always ask why. This article will explain through Html,ihttphandler and IHttpAsyncHandler implementation of the file upload and upload the progress of the principle, I hope you have much help.

Effect Chart:

The knowledge points covered in this article:
1. The foreground uses the Html,ajax,jquery,jquery UI

2. Background uses general handlers (IHttpHandler) and general asynchronous handlers (IHttpAsyncHandler), and involves "push mode"

Create an HTML page

1, in the creation of the Web project to add an HTML file, named Uploadfile.htm, in the header file to introduce the Jquery,jquery UI

    < Link href = "Styles/jquery-ui-1.8.16.custom.css" rel = "stylesheet" type = "Text/css" />
    < Script src = "Scripts/jquery-1.6.2.min.js" type = "Text/javascript" ></ Script >
    < Script src = "Scripts/jquery-ui-1.8.16.custom.min.js" type = "Text/javascript" ></ Script >

2, about no refresh file upload

Can not upload files through Ajax, no refresh upload is by the hidden IFRAME to achieve

 <form id=  "  form  "  target =  "  framefileupload    enctype=    multipart/form-data   " > <div id= "   ProgressBar    style=    font-size:1em;    ></div> <input type=    file   " id= "   FileUpload    name=    fileupload   "/><span id= " Progressvalue    ></span> <iframe id=  "  framefileupload  "  Name=  "  framefileupload  "  style=  "  display:none;    ></iframe> <br/> <input type=  "  submit  "  value =    upload    id =  "  submit  " /> </foRm> 
 

To set the target property of the form label to the ID of the IFRAME, don't forget to set the form's enctype to Multipart/form-data

<div id="progressbar" style="font-size:1em; "></div>

is used to show the progress bar when uploading files

In JS, add the following processing:

    <script type="text/javascript">         $ (function () {             $ (  "#submit"). button ();             $ ("#fileUpload").     button (); </script>

At this point the effect:

Second, implementation file upload

Add a generic handler, named Uploadfilehandler.ashx

  public   void   ProcessRequest (HttpContext context) { //  do not process   if  (context) If the file name being submitted is empty. Request.Files.Count =  0  | |  string . Isnullorwhitespace (context. request.files[ 0  ].             FileName))   return  ;  //  get file stream  Stream stream = context. request.files[ 0  ].             InputStream;  //  Get file name   string  fileName = path.getfilename (context. request.files[ 0  <SPA< td>