Display upload progress using Ajax technology

Review previous:

This section describes how to intercept data from the HTTP request stream and save data-related information.

Overview:
Friends who have used Ajax should have heard of XMLHttpRequest objects. Ajax actually sends an asynchronous request to the server through the XMLHTTPRequest object, obtains data from the server, and then uses JavaScript to operate the Dom to update the page.
This article uses the XMLHTTPRequest object to display the progress in real time.

:

Body part:
Some predecessors set the refresh header field of the HTTP request to regularly refresh the page to display the progress. However, this will refresh the whole page, even if we make the progress bar into a separate page, the effect is still not very good. I tried to use the timer component of Ajax before, but I don't know why. The timer control is always unavailable during IIS preview. After a long time, I suspected it was a Ms bug. Finally, we found that a good alternative is to use the XMLHTTPRequest object to regularly refresh the data. In this way, we only need to request a small amount of data from the server each time, reducing the pressure on the server, in subsequent tests, we found that this method is really useful, and everything works normally under IIS (that is, the effect of running under IIS ).
Of course, if there is no data on the progress bar, this progress bar can only be a decoration, So I divide the following content into two parts: Save the progress information and display the progress.

1. Save progress information
First, we need to understand what progress the progress bar reflects here? There is no doubt that it is the progress of file upload ~~ In the previous article, we extracted the uploaded file data, that is, the extraction progress is the progress we want to display to the client. That's easy. We only need to compare the extracted file size with the total file size to know the percentage of the extracted files. But the question is, how do we know how much data has been uploaded? The answer must be to use a variable to save the uploaded data volume. So where can we access this variable on both the progress page and the HTTP upload module?
You must know that when you access multiple pages, the session object or URL will be used to pass the value to the previous page for communication. However, the HTTP module described in the previous article does not belong to a single page. Therefore, we cannot simply use session to make the progress page communicate with the upload module. Here we will mainly learn from the idea of mountain laike: first, we will build a class for storing file information, which is mainly used to save file information, such as file names, paths, and currently uploaded data volumes, upload time. Then, set a unique ID for a certain upload as the password for the Communication on the page. Only pages with this ID can obtain the information of the file corresponding to a certain upload. Now that we have two variables, we need to make these two variables available on multiple pages by uploading the page, register this ID variable as a hidden domain of the page, so that the HTTP request Stream Containing the page will contain the upload ID. Another class variable is saved in the cache of the page and used as the upload ID.
Now we assume that there is an uploadfileinfo class for storing file information.
First, we need to create an ID in the pageload of the upload page, register a hidden domain to save the ID, instantiate the uploadfileinfo class, and write the corresponding information to the class, finally, put the class in catch:

If (! Ispostback)
{
Uploadfileinfo UFI = new uploadfileinfo ();
Ufi. strfileguid = guid. newguid (). tostring; // use guid to represent a unique ID;
Ufi. strtempdir = server. mappath ("tempupload/" + Ufi. strfileguid + "//");
Clientscript. registerhiddenfield ("uploadid", UFI. strfileguid); // hide the field. Its name is uploadid and its value is Ufi. strfileguid.
Httpcontext. current. cache. add (UFI. strfileguid, UFI, null, datetime. now. adddays (10), timespan. zero, system. web. caching. cacheitempriority. high, null); // Add to catch
}

After the above steps, we can access it in the HTTP module.
Because this HTTP request stream contains a hidden domain, we can analyze the obtained HTTP request stream to obtain the corresponding upload ID, that is what we said before. Then, find the file information object in the cache through the cache number, so that we can modify the uploaded data volume of the object during subsequent data reading. Because it is placed in the cache and a reference object, after the object is modified, other code accesses the latest value.

String sguid = getuploadid (bpreloadedenititybody, econtentencode); // getuploadid is a self-written method used to obtain the upload ID from the request stream.
Uploadfileinfo ufifileinfo = (uploadfileinfo) httpcontext. Current. cache [sguid]; // retrieves the file information object

If you want to use this object on other pages, you must first obtain the ID and then you can operate it as needed.

2. display progress
We can see that when the progress is displayed, the page on the back is dimmed and cannot respond to any event, a bit like a modal window. This effect can be checked online, which is quite easy to implement. I have a piece of JS Code showing this effect (collected on the Internet ):

Modaldialog

Next, let's focus on how to implement regular partial refresh.
I will not detail the XMLHTTPRequest object here. I will provide a manual for you to download. To make it easier to understand, let me give you a small example:

Small Example

Through the above small example, you should have some knowledge about this object. To implement timed refresh, I place the progress bar on a single page (for example,. aspx), through the setTimeout of js to regularly execute methods like returnresponse, and then in. aspx. obtain the file information object in the CS code, and then use response to feedback the progress information. In this way, information can be obtained and displayed on the. ASPX page. However, executing activexobject will take a lot of costs, and we will execute this method regularly, which will obviously cause performance degradation. After referring to building a pool to manage the XMLHTTP object of the refreshing page, we decided to use this method. It turns out that this method is indeed effective.

Code after using pool

This is almost the end of the entire topic. In the next few days, I will slightly adjust the code and upload it.

Since this time is about to go to work, I can't take any time to sort it out. If you need it, take a look. However, code writing is a bit messy, and some functions are not perfect. It takes too little time. Sorry.
Rough Engineering