Sample Downloads: http://code.msdn.microsoft.com/CSASPNETFileUploadStatus-5ff0194f
Today’s sample demostrate how to show the file upload status based on AJAX without a third part component like ActiveX control, Flash or Silverlight. It's also a solution for big file uploading.
You can find more code samples that demonstrate the most typical programming scenarios by using Microsoft All-In-One Code Framework Sample Browser or Sample Browser Visual Studio extension. They give you the flexibility to search samples, download samples on demand, manage the downloaded samples in a centralized place, and automatically be notified about sample updates. If it is the first time that you hear about Microsoft All-In-One Code Framework, please watch the introduction video on Microsoft Showcase, or read the introduction on our homepage http://1code.codeplex.com/.
The project illustrates how to show the file upload status based on AJAX without a third part component like ActiveX control, Flash or Silverlight. It's also a solution for big file uploading.
When a file is uploading, the server will get the request data like below. (P.S. we can get this part when we upload a file by a tool like Fiddler.) /*---------Sample reference Start------*/ POST http://jerrywengserver/UploadControls.aspx'>http://jerrywengserver/UploadControls.aspx HTTP/1.1 Accept: application/x-ms-application, image/jpeg, application/xaml+xml, image/gif, image/pjpeg, application/x-ms-xbap, application/x-shockwave-flash, */* Referer: http://jerrywengserver/UploadControls.aspx'>http://jerrywengserver/UploadControls.aspx Accept-Language: en-US User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; MS-RTC LM 8; .NET4.0C; .NET4.0E) Content-Type: multipart/form-data; boundary=---------------------------7da106f207ba Accept-Encoding: gzip, deflate Host: jerrywengserver Content-Length: 1488 Connection: Keep-Alive Pragma: no-cache -----------------------------7da106f207ba Content-Disposition: form-data; name="__VIEWSTATE" /wEPDwUKMTI3MTMxMTcxNw9kFgICAw8WAh4HZW5jdHlwZQUTbXVsdGlwYXJ0L2Zvcm0tZGF0YWRkcrWP136t6D4d+g8BDfyR5WF+aP/yi4YARRyuOuRsO1M= -----------------------------7da106f207ba Content-Disposition: form-data; name="__EVENTVALIDATION" /wEWAgL5mtyRBALt3oXMA9W4TniGaEKs/xcWf28H93S+wRcfLHr35wNo+N1v9gQ5 -----------------------------7da106f207ba Content-Disposition: form-data; name="fuFile"; filename="C:\******\FileUploadTest.txt" Content-Type: text/plain *****This part is the content of the uploaed file!***** -----------------------------7da106f207ba Content-Disposition: form-data; name="btnUpload" Upload -----------------------------7da106f207ba-- /*---------Sample reference End-----*/ There are some useful information in the head part, for example, The content-Type of this request. The boundary which seperate the body part. The content-length of this request. Some request variables. The filename of the uploaded file and its content-type. If we analyze the data, we can find some tips like below. 1. All the request data is sperated by a boundary which is defined in the content-type of the head part. 2. The name and the value of one parameter is seperated by a newline. 3. If the parameter is a file, we can get the filename and content-type of the file 4. The data of the file followed the content-type of the file. So when the server has got all these data, the uploading will be finished. The prolem left here is how can we get to know that how much data the server had read and is there a way that we can control the length which the server read by one time. For IIS and .Net Framework, we can control this by a HTTPModule. Data reading will be started in BeginRequest event. And the HttpWorkerRequest class could control the reading process. We can use HttpWorkerRequest.GetPreloadedEntityBody() to get the first part of the request data which the server read. If the data is too large, HttpWorkerRequest.IsEntireEntityBodyIsPreloaded will return false, we can use HttpWorkerRequest.ReadEntityBody() to read the left data. By this way, we can know how much data loaded and how much left. At last, we need to send the status back to the server, here I store the status to the Cache. Another important issue is how the client side get the status from the server side without postback to the server. The answer is to use AJAX feature. Here we use ICallBackEventHandler, because it is easy to handle and clear enough for us to understand the process. We can learn how to use it from the reference at the bottom of this readme file. We can also use jQuery ajax to call back a web service or generic handler to get the status.
Step 1. Build the website "WSFileUploadStatus". Step 2. View the Default.aspx in the browser. Step 3. Select a file which you want to test the sample. Step 4. Click Upload button. And you will see the upload status in details.