Applying Response.Write to implement multi-file uploads with progress bars

A few days ago, wrote an essay "Using Response.Write to achieve the interaction between the front and back of the page life cycle." That is, in fact, mainly in the page cycle of ASP.
Use Response.Write to instantly push content from the backend to the foreground.

This essay is a practical application of the previous article, using this feature of Response.Write to achieve real-time progress display when uploading files. If the
RESPONSE. Write/response. Flush does not know very well, please move here first.

Please attach the sample code multiuploadprogressclassic.

In advance, the HTML development to 5, the use of the Web API and jquery upload plug-ins can be very good to achieve the awesome upload progress bar effect. But the essay is only for those who cannot support HTML5
browsers, such as IE8 and below, but do not want to rely on flash and other implementation of the scene. You can also say that the method you are describing today is a bit out of date. As for the method of realization under HTML5, I
There is time to write another essay in the near future.

Anyway

The basic layout of the page we want to implement is this.

The upload starts, showing the real-time progress of each file. Such as.

Once the upload is finished, restore the basic layout of the page again.

Before HTML5, files uploaded through the Web File control can be recognized and read only by synchronizing the post to the server side. Until then, the client was unable to know the contents of the file. The
To, the real state of the file upload can only be passed from the background to the front-end display, at this time, we will rely on Response.Write.

First, before the file is actually read by the server, the initial progress (0%) is drawn to the front-end according to the upload situation. Second, in the process of reading, periodically pushes the progress to the front-end
Case The main flow is as follows.

Initial progress of uploading files

Request.Files carries the file content to the server side, drawing the initial state to the page through Response.Write before starting the read.

1      Public voidcreateprogress (httpfilecollection filecollection)2     {3StringBuilder sbprogress =NewStringBuilder ();4Sbprogress.append ("");//Construct output Content5Sbprogress.append ("<script src= ' filesupload.js ' type= ' text/javascript ' ></script><table id= ' mainTable ' border= ' 0 ' >");6          for(inti =0; i < Filecollection.count; i++)7         {8             stringStrprogressbarid ="ProgressBar"+i;9             stringStrpercentageid ="percentage"+i;Ten             stringFileName =Filecollection[i]. FileName; OneSbprogress.append ("<tr><td>"); ASbprogress.append ("<p style = ' float:left; margin-left:0px; margin-right:10px; ' >"+ FileName +"</p>"); -Sbprogress.append ("<div style= ' background-color:white; width:100px;height:12px; border-color:black;border-width:thin; Border-style:solid;float:left; margin-left:0px; margin-right:10px ' >"); -Sbprogress.append ("<div style= ' background-color:green;height:12px; ' id= '"+ Strprogressbarid +"' ></div></div>"); theSbprogress.append ("<p float:left; margin-left:0px; margin-right:10px; ><div id= '"+ Strpercentageid +"' ></div></p>"); -Sbprogress.append ("</td></tr>"); -         } -Sbprogress.append ("</table>"); +          for(inti =0; i < Filecollection.count; i++) -         { +Sbprogress.append ("<script type= ' Text/javascript ' > Setprogressbarprogressamount ("+ i +", 0);</script>"); A         } atSbprogress.append ("</body>"); -  - HttpContext.Current.Response.Write (sbprogress.tostring ()); -HttpContext.Current.Response.Flush ();//Force output Content -}

Initial Progress Drawing

File Progress Update

As can be seen from the code snippet above, setting the upload progress value is achieved by invoking the JS method Setprogressbarprogressamount. Real-time progress during the read of a file
This method is also updated to the front end.

1      Public Static voidSetprogressbar (intIdstringprogressamount)2     {3StringBuilder SB =NewStringBuilder ();4Sb. Append ("<body><script type= ' text/javascript ' >setprogressbarprogressamount ("+ ID +", '"+ Progressamount +"'); </script></body>");5 6 HttpContext.Current.Response.Write (sb.) ToString ());7 HttpContext.Current.Response.Flush ();8}

Real-time progress updates

The update progress method is performed once every time the file content of a certain size has been read.

1      while((tripdownloadsize = stream.) Read (b,0, buffersize)) >0)2     {3Fs. Write (b,0, tripdownloadsize);4Totaldownloadedsize + =tripdownloadsize;5Percentage = (int) (Totaldownloadedsize * -) /totaluploadsize;6Setprogressbar (ID, percentage.tostring ());//Update Progress7System.Threading.Thread.Sleep ( -);8}

Call Progress Update

Finally, there is one more thing to explain. We put the area containing the Web file control into a new page and reference it through the IFRAME. This is done to avoid post the entire
Page.

All right, this is the end of this article.

Applying Response.Write to implement multi-file uploads with progress bars