In a recent project, there is an upload function: Upload a CVS file, then parse the file and write to the database
Because often need to pass very big file, the customer completes this function often to need 40 minutes, in this process, the page also does not have any hint, the user experience is very bad?
Why not use Ajax as a progress bar?
Complete this requirement in two steps:
One: Write a simple Ajax, to achieve the simplest progress bar function.
Second: the progress bar is transformed into a progress bar available for the project.
One: The simplest progress bar
1. The client sends a CREATEXMLHTTPREQUEST request to the server every 2 seconds. and gets the progress data returned by the server. Updates the width of a table with JavaScript, based on the data returned by the server.
This simulates a progress bar.
Progressbar.html. The contents are as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>ajax Progress bar</title>
<script type= "Text/javascript" ....
var xmlHttp;
var key;
function Createxmlhttprequest () ... {
if (window. ActiveXObject) ... {
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
else if (window. XMLHttpRequest) ... {
XmlHttp = new XMLHttpRequest ();
}
}
function Go () ... {
Createxmlhttprequest ();
Clearbar ();
var url = "Progressbarservlet?task=create";
var button = document.getElementById ("Go");
Button.disabled = true;
Xmlhttp.open ("Get", url, True);
Xmlhttp.onreadystatechange = Gocallback;
Xmlhttp.send (NULL);
}
function Gocallback () ... {
if (xmlhttp.readystate = 4) ... {
if (xmlhttp.status = 200) ... {
SetTimeout ("Pollserver ()", 2000);
}
}
}
function Pollserver () ... {
Createxmlhttprequest ();
var url = "progressbarservlet?task=poll&key=" + key;
Xmlhttp.open ("Get", url, True);
Xmlhttp.onreadystatechange = Pollcallback;
Xmlhttp.send (NULL);
}
function Pollcallback () ... {
if (xmlhttp.readystate = 4) ... {
if (xmlhttp.status = 200) ... {
var percent_complete = XmlHttp.responseXML.getElementsByTagName ("percent") [0].firstchild.data;
var progress = document.getElementById ("Progress");
var progresspersent = document.getElementById ("progresspersent");
Progress.width = percent_complete + "%";
progresspersent.innerhtml = percent_complete + "%";
if (Percent_complete < 100) ... {
SetTimeout ("Pollserver ()", 2000);
else ... {
document.getElementById ("complete"). InnerHTML = "complete!";
document.getElementById ("Go"). Disabled = false;
}
}
}
}
function Clearbar () ... {
var Progress_bar = document.getElementById ("ProgressBar");
var progresspersent = document.getElementById ("progresspersent");
var complete = document.getElementById ("complete");
progress_bar.style.visibility = "visible"
progresspersent.innerhtml = " ";
complete.innerhtml = "Begin to upload this file ...";
}
</script>
<body>
<div id= "ProgressBar" style= "Padding:0px;border:solid black 0px;visibility:hidden" >
<table width= "border=" 0 "cellspacing=" 0 "cellpadding=" 0 "align=" center ">
<tr>
<TD align= "center" id= "Progresspersent" >86%</td>
</tr>
<tr >
<td>
<table width= "100%" border= "1" cellspacing= "0" cellpadding= "0" bordercolor= "#000000" >
<tr>
<td>
<table width= "1%" border= "0" cellspacing= "0" cellpadding= "0" bgcolor= "#FF0000" id= "Progress" >
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
<tr>
<TD align= "center" id= "complete" >completed</td>
</tr>
</table>
</div>
<input id = "Go" name= "Run" type= "button" value= "Run" "onclick=" Go (); " >
</body>