This tutorial to learn asp.net use Response.Write This feature to realize the real-time progress of uploading files, the focus of this article is the ASP.net page in the life cycle of the interaction between the front and back.
A few days ago, wrote an essay "Use Response.Write to realize the interaction between the front and back of the page in the life cycle." Said is the interaction, in fact, is mainly in the ASP.net page cycle from the background to use Response.Write to the front desk to push content immediately.
This essay is a practical application of the previous article, using this feature of Response.Write to realize the real-time progress of the upload file display. As to Response.write/response. Flush not very understanding, you can first Baidu.
In advance, the HTML development to 5, using the Web API and jquery upload Plug-ins can be very good to achieve a very cool 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 use the flash and so on to achieve the scene. You can also say that the methods to be described today are somewhat outdated. As for the method of realizing under HTML5, I
Have time to write another essay in the near future.
Anyway
The basic layout of the page we want to implement is this.
When the upload begins, the real-time progress of each file is displayed. The following figure.
Once the upload is over, restore the basic layout of the page again.
Before HTML5, files uploaded through a Web file control can be recognized and read only by synchronizing the post to the server side. Prior to this, the client side was unable to know the contents of the file. The
In this case, the real state of the file upload can only be transferred from the background to the front end display, at this time, we will use Response.Write.
First, before the file is actually read by the server, the initial progress (0%) will be drawn to the front end based on the upload. Second, in the process of reading, periodically to the front-end push progress
Situation The main process is as follows.
Initial progress of uploading files
Request.Files carries the contents of the file to the server side and draws the initial state to the page by Response.Write before beginning the read.
public void createprogress (httpfilecollection filecollection)
{
StringBuilder sbprogress = new StringBuilder ();
sbprogress.append ("<html><head></head> <body>"); Constructs the output content
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></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></html>");
HttpContext.Current.Response.Write (Sbprogress.tostring ());
HttpContext.Current.Response.Flush (); Force output Content
}
File Progress Update
From the above code snippet can be seen, set the upload progress value by calling the JS method Setprogressbarprogressamount to achieve. In the process of reading a file, the real-time progress
It is also updated to the front end by this method.
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 performed once for each file content that has been read out of a certain size.
Call Progress Update
while (tripdownloadsize = stream. Read (b, 0, buffersize)) > 0)
{
Fs. Write (b, 0, tripdownloadsize);
Totaldownloadedsize + = Tripdownloadsize;
Percentage = (int) (totaldownloadedsize *)/totaluploadsize;
Setprogressbar (ID, percentage.tostring ()); Update progress
System.Threading.Thread.Sleep (100);
}
Finally, there is one more thing to explain. We place the area containing the Web file control in a new page and refer to it through an IFRAME. This is done to avoid having to post the entire page every time.
OK, this is the end of this article.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
