Extjs+asp.net implementation upload large file with real-time progress bar

Mainly in order to record their own learning process, organize their own ideas in order to learn later.

First of all, let's talk about the whole idea.

We all know that the ASP's own upload file is the uploaded file is first read into memory and then write to disk. If the file is large, there will be a page stall when uploading, without any reflection. Users do not know what the page is doing, do not know whether the upload, upload how much? This kind of user experience is very poor.

So we need to implement a progress bar to reflect the progress of the file upload, can reflect the progress of file writing. The specific idea is to subscribe to various application events (such as beginrequest events and endrequest events) within the Init method in the HttpModule (HTTP module) provided by ASP. The Application.beginrequest event is always the first event that occurs during the processing of an HTTP request. What I want to do is to intercept the upload request in the Befionrequest event, and then do the file block upload, you can get the progress of the file upload.

Then we build a step-by-step to complete this function.

1. to write the module class, you must first configure Web. config. Registering the module

Add modules in the <System.Web> section in Web. config:

Format is

<add name= "ModuleName" type= "Classname,assemblyname"/>

The section that I configured according to the format above:

<add name= "MyHttpModule1" type= "Myhttpmodule"/>

2. then create an identical class Myhttpmodule according to the configured module .

Note that this class must implement the IHttpModule interface in order to achieve the basic functionality of HttpModule. The module's initialization and handling events are then added to the class.

public void Dispose ()
{
}

public void Init (HttpApplication application)
{

Subscribe to the events of our door

Subscribe to BeginRequest Events

Application. Begionrequest+=neweventhandler (this. Aplication_beginrequest);
}

3. Add event voidapplication_beginrequest (object sender, EventArgs e)

Write code in this to implement the functions that we need

1. first to determine whether to upload files

Because the form form that needs to upload the file must set the Enctype property in the form recognition to multipart/form-data (if we use the FileUpload component, we will automatically add this property at compile time). So we just have to judge whether the ContentType value of the HTTP request header is Multipart/form-data, and if not, we don't need to process the request.
Enctype= "Multipart/form-data is actually an encoding specification (the default is application/x-www-form-urlencoded, which is not suitable for bulk binary data transfer), The basic idea of this coding method is to separate the data items with separators, such as "-----------------------------7d87d1cc0a88".

1. 2. get The total length of HTTP requests and httpworkerrequest Objects

By getting the HttpApplication.Request.ContentLength property, you get the total length of the HTTP request content so that we can use it later. Then declare a specific instance of the current HTTP request

IServiceProvider Provider = (IServiceProvider) httpcontext.current;

HttpWorkerRequest request = (HttpWorkerRequest) provider. GetService (typeof (HttpWorkerRequest));

4. block read requests and store data.

Use the Httpworkerrequest.getpreloadedentitybody () method to get the HTTP request section for the first time. Httpworkerrequest.readentitybody () reads the remaining data.

while (Ileave > ireadstepsize && request. IsClientConnected ())
First determine if the remaining request size is greater than ireadstepsize

Iread = Request.   Readentitybody (Breadstepbyte, ireadstepsize); /* Read the maximum number of bytes to the Ireadstepsize user request into the breadstepbyte array */

Processing of the contents of a file

Ileave-= Iread;
}
if (Ileave > 0 && request. IsClientConnected ())
{iread = Request. Readentitybody (Breadstepbyte, Ileave);

/* Last remaining part, because less than ireadstepsize, so write in the outside of the loop */

Processing of the contents of a file
}

The part that we really need to upload is the file Content section. The first read includes the request for first-class content. We need to intercept the contents of the document.

7d87d1cc0a88-----------------------------
Content-disposition:form-data; Name= "Tbvideoname"
03
VNM, Geneva
-----------------------------7d87d1cc0a88
Content-disposition:form-data; Name= "file"; filename= "C:\Documents and settings\stg609\ jean 岄 bulb \ Raccoon 彞. txt"
Content-type:text/plain
08
09 Here is the text content I uploaded
Ten-----------------------------7d87d1cc0a88
One by one content-disposition:form-data; Name= "__eventvalidation"
12
13/wewbgk0g/7jcqlrqykobgkj5pr/cakbmopqbqly14ynbqkmmtpnx1covxyqn8xeer3zxbnxzsuwvvo=
-----------------------------7d87d1cc0a88--

(09) line is the file content that we need.

5. Get upload progress.

1. First, you need to declare a hidden field on the upload side to save a globally unique uploadid. This variable is equivalent to a flag. As long as you get this flag, you can get the upload progress.

2. Write a class to save the progress. This class is then saved to Cahce. Use Uploadid as the key for the cache.

3. Use the Ajax XMLHttpRequest object to send an asynchronous request to the server.

Extjs+asp.net implementation upload large file with real-time progress bar