Ajax File Upload progress bar

Source: Internet
Author: User
Tags file upload file upload progress bar visibility

Ajax File Upload progress bar page: progressbar.jsp

<%@ page contenttype= "text/html; CHARSET=GBK "%>
<title>
Ajax progress Bar
</title>
<script type= "Text/javascript" >
XMLHttpRequest objects
var xmlHttp;
var key;
progress bar Color
var bar_color= ' Gray ';
var span_id= ' block ';
var clear= "&nbsp;&nbsp;&nbsp;"

Creating XMLHttpRequest Objects
function Createxmlhttprequest () {
if (window. ActiveXObject) {
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
else if (window. XMLHttpRequest) {
XmlHttp = new XMLHttpRequest ();
}
}

Execution method
function Go () {
Createxmlhttprequest ();
Checkdiv ();
var url = "Progressbarservlet?task=create";
Hide button
var button = document.getElementById ("Go");
Button.disabled = true;

Xmlhttp.open ("Get", url,true);
Xmlhttp.onreadystatechange = Gocallback;
Xmlhttp.send (NULL);
}

callback method
function Gocallback () {
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 200) {
Set Update time
SetTimeout ("Pollserver ()", 2000);
}
}
}

Refresh, Resend
function Pollserver () {
Createxmlhttprequest ();
var url = "progressbarservlet?task=poll&key=" + key;
Xmlhttp.open ("Get", url,true);
Xmlhttp.onreadystatechange = Pollcallback;
Xmlhttp.send (NULL);
}

callback method
function Pollcallback () {
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 200) {
Percent complete
var percent_complete = XmlHttp.responseXML.getElementsByTagName ("percent") [0].firstchild.data;

var index = Processresult (percent_complete);
var (var i = 1; I <= index;i++) {
var elem = document.getElementById ("block" + i);
elem.innerhtml = clear;

Elem.style.backgroundColor = Bar_color;
var Next_cell = i + 1;
if (Next_cell > Index && Next_cell < = 9) {
document.getElementById ("block" + next_cell). InnerHTML = percent_complete + "%";
}
}

if (Index < 9) {
SetTimeout ("Pollserver ()", 2000);
}else{
document.getElementById ("complete"). InnerHTML = "complete!";
document.getElementById ("Go"). Disabled = false;
}
}
}
}

Parse results
function Processresult () {
var ind;
if (percent_complete.length = = 1) {
IND = 1;
}else if (percent_complete.length = = 2) {
IND = percent_complete.substring (0,1);
}else (
IND = 9;
}

return IND;
}

Check the TIP layer information
function Checkdiv () {
var Progress_bar = document.getElementById ("ProgressBar");
if (progress_bar.style.visibility = = "visible") {
Clear progress bar
Clearbar ();
document.getElementById ("complete"). InnerHTML = "";
}else{
progress_bar.style.visibility = "visible";
}
}

Clear progress bar
function Clearbar () {
for (var i = 1; i < i++) {
var elem = document.getElementById ("block" + i);
elem.innerhtml = clear;
Elem.style.backgroundColor = "White";
}
}
</script>
<body bgcolor= "#ffffff" >
Ajax progress Bar Example
To run the progress bar:
<input type= "button" value= "Run" id= "Go" onclick= "Go ()"/>
<p>
</p>
<table align= "center" >
<tbody>
<tr>
<td><div id= "ProgressBar" style= "Padding:2px;border:solid black 2px;visibility?hidden" >
<span id= "Block1" >&nbsp;&nbsp;&nbsp;</span>
<span id= "Block2" >&nbsp;&nbsp;&nbsp;</span>
<span id= "Block3" >&nbsp;&nbsp;&nbsp;</span>
<span id= "Block4" >&nbsp;&nbsp;&nbsp;</span>
<span id= "Block5" >&nbsp;&nbsp;&nbsp;</span>
<span id= "Block6" >&nbsp;&nbsp;&nbsp;</span>
<span id= "Block7" >&nbsp;&nbsp;&nbsp;</span>
<span id= "Block8" >&nbsp;&nbsp;&nbsp;</span>
<span id= "Block9" >&nbsp;&nbsp;&nbsp;</span>
</div></td>
</tr>
&LT;TR&GT;&LT;TD align= "center" id= "complete" ></td> </tr>
</tbody>
</table>
</body>


Server side: Progressbarservlet.java

Package ajaxvalidation;

Import javax.servlet.*;
Import javax.servlet.http.*;
Import java.io.*;
Import java.util.*;

public class Progressbarservlet
Extends HttpServlet {
private static final String Content_Type = "text/html;" CHARSET=GBK ";
Counter
private int counter = 1;
Initialize Global Variables
public void Init () throws Servletexception {
}

Handling Get methods
public void doget (HttpServletRequest request, httpservletresponse response) throws
Servletexception, IOException {
Get task type
String task = Request.getparameter ("task");
The returned XML string
String res = "";

For the first time, create a progress bar
if (Task.equals ("create")) {
res = "<key>1</key>";
counter = 1;
}else{
Percent complete
String percent = "";
Switch (counter) {
Case 1:percent = "ten";
Case 2:percent = "n";
Case 3:percent = "a";
Case 4:percent = "Wuyi";
Case 5:percent = "the";
Case 6:percent = "by";
Case 7:percent = "the";
Case 8:percent = "a";
}
counter++;

res = "<percent>" + percent + "</percent>";
}

PrintWriter out = Response.getwriter ();
Response.setcontenttype ("Text/xml");
Response.setheader ("Cache-control", "No-cache");
Out.println ("<response>");
Out.println (RES);
Out.println ("</response>");
Out.close ();
}

Clean up resources
public void Destroy () {
}
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.