Apply Response. Write to implement Multifile upload with a progress bar

Apply Response. Write to implement Multifile upload with a progress bar

In this tutorial, we will learn how to use the RESPONSE. WRITE feature of asp.net to display the real-time progress of uploaded files. This article focuses on the interaction between the front and back ends in the lifecycle of the asp.net page.

 

 

A few days ago, I wrote an article titled "using RESPONSE. WRITE to implement frontend and backend interaction in the lifecycle of a page ". In fact, it is mainly used to push content from the background to the foreground in the ASP. NET page cycle.

This article is a practical application of the previous article. Using the RESPONSE. WRITE feature, you can display the real-time progress of uploaded files. If you do not know much about RESPONSE. WRITE/RESPONSE. FLUSH, You Can Baidu first.

To declare it in advance, HTML has been developed to 5, and the use of web APIs and jQuery upload plug-ins can achieve a Very dazzling upload progress bar effect. However, this article only targets those that do not support HTML5.

Browser, such as IE8 and below, and do not want to use Flash to implement the scenario. You can also say that the method to be described today is outdated. As for the Implementation Method in HTML5, I personally

I will write another article in the near future.

Let's get down to the truth.

The basic layout of the page is as follows.

 

When the upload starts, the real-time progress of each file is displayed. For example.

 

After the upload is complete, restore the basic layout of the page again.

Before HTML5, files uploaded through the web file control can be identified and read only when post is synchronized to the server. Before that, the client cannot know the file content. Institute

Therefore, the real status of File Upload can only be transmitted from the background to the front-end display. At this time, we need to use RESPONSE. WRITE.

First, draw an initial progress (0%) to the front-end based on the upload status before the file is actually read by the server ). Second, the progress is periodically pushed to the front-end during the read process.

Status. The main process is as follows.

 

Initial progress of File Upload

Request. Files carries the file content to the server. before reading the file, use RESPONSE. WRITE to draw the initial status to the page.

Public void CreateProgress (HttpFileCollection fileCollection)
{
StringBuilder sbProgress = new StringBuilder ();
SbProgress. Append ("SbProgress. append ("<script src = 'filesupload. js 'Type = 'text/javascript '> </script> <table id = 'maintable' border = '0'> ");
For (int I = 0; I <fileCollection. Count; I ++)
{
String strProgressBarId = "progressBar" + I;
String strPercentageId = "percentage" + I;
String fileName = fileCollection [I]. FileName;
SbProgress. Append ("<tr> <td> ");
SbProgress. 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> ");
SbProgress. append ("<p float: left; margin-left: 0px; margin-right: 10px; '> <div id =' "+ strPercentageId +" '> </div> </p> ");
SbProgress. Append ("</td> </tr> ");
}
SbProgress. Append ("</table> ");
For (int I = 0; I <fileCollection. Count; I ++)
{
SbProgress. Append ("<script type = 'text/javascript '> SetProgressBarProgressAmount (" + I + ", 0); </script> ");
}
SbProgress. Append ("</body>

HttpContext. Current. Response. Write (sbProgress. ToString ());
HttpContext. Current. Response. Flush (); // force the output content
}

 

File progress update

From the code segment above, we can see that setting the upload progress value is achieved by calling the js method SetProgressBarProgressAmount. Real-time progress during File Reading

This method is also used to update to the front-end.

Public static void setProgressBar (int id, string progressAmount)
{
StringBuilder sb = new StringBuilder ();
Sb. append ("<body> <script type = 'text/javascript '> SetProgressBarProgressAmount (" + id + ",'" + progressAmount + "'); </script> </body> ");

HttpContext. Current. Response. Write (sb. ToString ());
HttpContext. Current. Response. Flush ();
}

 

The Update Progress method is executed once every time the file content of a certain size is read.

Call Progress Update

 

While (tripDownloadSize = stream. Read (B, 0, bufferSize)> 0)
{
Fs. Write (B, 0, tripDownloadSize );
TotalDownloadedSize + = tripDownloadSize;
Percentage = (int) (totalDownloadedSize * 100)/totalUploadSize;
SetProgressBar (id, Percentage. ToString (); // Update Progress
System. Threading. Thread. Sleep (100 );
}

Finally, we need to explain a little more. We place the area containing the web file control in a new page and reference it through Iframe. In this way, the whole page is not post every time.

Okay. This article is complete.