ASP when using components to upload, a little trouble is not know the upload progress, although some provide the upload progress bar, such as abcupload (: http://www.websupergoo.com) has provided a way to display the current upload status, there is a special example (progressupload.htm under examplesin the installation directory). It is a page showing the progress while submitting data (progressbar. ASP), and then use the Page Auto-Refresh to get the current upload status at every point of time, and then display them, but the efficiency of using the Page Auto-Refresh method is relatively low, it is not difficult to adjust the Refresh Interval (the minimum interval is 1 second), and the server returns a large amount of data, so it cannot reflect the upload situation in real time. When the client uses JavaScript to call the MSXML object and settimout methods to regularly load an XML file, you can get server-side data without refreshing the timer. Here, you can set the progressbar. ASP outputs data in XML format for the client to load, and returns only a few required parameters. In this way, the page is not refreshed, And the transmitted data is small. You do not need to upload all the data to the client, only data reflecting the status is transmitted. If the timer time is small enough, we can see the upload status in "Real Time. The following uses abcupload4 as an example to describe how to create a real-time file upload progress bar.
(Note: we can improve it based on the abcupload example .)
Progressupload.htm)
<HTML>
<Body>
<Script language = "JavaScript">
<! --
Theuniqueid = (new date (). gettime () %1000000000;
Function S () // execute the function that displays the progress bar when data is submitted
{
Bar (); // starts executing the function that reflects the upload status.
Document. myform. Action = "progressupload. asp? Id = "+ theuniqueid; // The program that processes the uploaded data
Document.myform.tar get = "up" // put the submitted data in an IFRAME named "up" for processing, so that the submitted page will not jump to the page for processing data.
Document. myform. Submit (); // submit the form
}
Function bar ()
{
Bar1.style. Display = ''; // visible to the layer that displays the upload progress
VaR timeoutid = NULL; // This variable is the ID of the timer.
VaR oxmldoc = new activexobject ('msxml'); // create an 'msxml' object
Surl = "progressbar. asp? Id = "+ theuniqueid +" & temp = "+ math. Random (); // address for retrieving upload status data
Oxmldoc. url = Surl; // load data
VaR oroot = oxmldoc. root; // get the root node that returns XML data
If (oroot. Children! = NULL)
{
If (oroot. Children. Item (0). Text-100 = 0) // cancel the timer when the file upload ends.
Cleartimeout (timeoutid)
Percentdone. style. width = oroot. Children. Item (0). Text + "%"; // set the percentage of progress bars.
// Display the returned data on the client
Min. innerhtml = oroot. Children. Item (1). Text; // display the remaining time (minutes)
Secs. innerhtml = oroot. Children. Item (2). Text; // display the remaining time (seconds)
Bytesdone. innerhtml = oroot. Children. Item (3). Text; // size of uploaded data
Bytestotal. innerhtml = oroot. Children. Item (4). Text; // The total size.
Bytespersecond. innerhtml = oroot. Children. Item (5). Text; // transmission rate
Information. innerhtml = oroot. Children. Item (6). Text; // upload information
}
If (oroot. Children. Item (0). Text-100 <0) // obtain the data at intervals as long as the file has not been uploaded.
Timeoutid = setTimeout ("bar ()", 50) // set the time interval to 0.05 seconds. You can also modify the time interval for obtaining data according to your situation.
}
// -->
</SCRIPT>
<Form name = "myform" method = "Post" Action = "progressupload. asp" enctype = "multipart/form-Data" target = up>
<Input type = "file" name = "filefield1"> <br>
<Input type = "button" name = "dosubmit" value = "Upload" onclick = "s ()"> <br>
<Div id = bar1 style = "display: none">
<Table border = "0" width = "100%">
<Tr>
<TD> <font face = "verdana, Arial, Helvetica, sans-serif" size = "2"> <B> transfer: </B> </font> </TD>
</Tr>
<Tr bgcolor = "#999999" type = "codeph" text = "/codeph">
<TD>
<Table border = "0" width = "" cellspacing = "1" bgcolor = "# 0033ff" id = percentdone>
<Tr>
<TD> <font size = 1> & nbsp; </font> </TD>
</Tr>
</Table>
</TD>
</Tr>
<Tr>
<TD>
<Table border = "0" width = "100%">
<Tr>
<TD> <font face = "verdana, Arial, Helvetica, sans-serif" size = "1"> remaining time: </font> </TD>
<TD> <font face = "verdana, Arial, Helvetica, sans-serif" size = "1">
<Span id = min> </span>
<Span id = secs> </span> seconds
(<Span id = bytesdone> </span> KB
<Span id = bytestotal> </span> kb uploaded) </font> </TD>
</Tr>
<Tr>
<TD> <font face = "verdana, Arial, Helvetica, sans-serif" size = "1">
Transfer Speed: </font> </TD>
<TD> <font face = "verdana, Arial, Helvetica, sans-serif" size = "1">
<Span id = bytespersecond> </span> KB/second </font> </TD>
</Tr>
<Tr>
<TD> <font face = "verdana, Arial, Helvetica, sans-serif" size = "1"> information: </font> </TD>
<TD> <font face = "verdana, Arial, Helvetica, sans-serif "size =" 1 "> <span id = Information> </span> </font> </TD>
</Tr>
</Table>
</TD>
</Tr>
<Tr> </tr>
</Table>
</Div>
<IFRAME name = "up" style = "display: none"> </iframe>
</Form>
</Body>
</Html>
Progressbar. asp (the file that returns the upload status data)
<% @ Enablesessionstate = false %>
<%
On Error resume next
Set theprogress = server. Createobject ("abcupload4.xprogress") 'create an Upload Component Object
Theprogress. ID = request. querystring ("ID ")
'Output the returned data in XML format
%>
<? XML version = "1.0" encoding = "gb2312"?>
<Plan>
<Percentdone> <% = theprogress. percentdone %> </percentdone>
<Min> <% = int (theprogress. secondsleft/60) %> </min>
<Secs> <% = theprogress. secondsleft mod 60%> </secs>
<Bytesdone> <% = round (theprogress. bytesdone/1024, 1) %> </bytesdone>
<Bytestotal> <% = round (theprogress. bytestotal/1024, 1) %> </bytestotal>
<Bytespersecond> <% = round (theprogress. bytespersecond/1024, 1) %> </bytespersecond>
<Information> <% = theprogress. Note %> </Information>
</Plan>
Progressupload. asp (process uploaded files)
<% @ Enablesessionstate = false %>
<%
Response. expires =-10000
Server. scripttimeout = 300
Set theform = server. Createobject ("abcupload4.xform ")
Theform. Overwrite = true
Theform. maxuploadsize = 8000000
Theform. ID = request. querystring ("ID ")
Set thefield = theform ("filefield1") (1)
If thefield. fileexists then
Thefield. Save thefield. filename
End if
%>
<HTML>
<Body>
Transfer ended
</Body>
</Html>
For uploading other components, the principle is almost the same, but the method is different.
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
