ajax檔案上傳進度條

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

ajax檔案上傳進度條頁面：progressBar.jsp

<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
Ajax進度條
</title>
<script type="text/javascript">
//xmlHttpRequest對象
var xmlHttp;
var key;
//進度條顏色
var bar_color='gray';
var span_id='block';
var clear="   "

//建立xmlHttpRequest對象
function createXMLHttpRequest(){
if (window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}

//執行方法
function go(){
createXMLHttpRequest();
checkDiv();
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 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;
}
}
}
}

//解析結果
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;
}

//檢查提示層資訊
function checkDiv(){
var progress_bar = document.getElementById("progressBar");
if (progress_bar.style.visibility == "visible"){
//清除進度條
clearBar();
document.getElementById("complete").innerHTML = "";
}else{
progress_bar.style.visibility = "visible";
}
}

//清除進度條
function clearBar(){
for (var i = 1; i < 10; i++){
var elem = document.getElementById("block" + i);
elem.innerHTML = clear;
elem.style.backgroundColor = "white";
}
}
</script>
</head>
<body bgcolor="#ffffff">
<h1>
Ajax進度條樣本
</h1>
運行進度條:
<input type="button" value="運行" 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">   </span>
<span id="block2">   </span>
<span id="block3">   </span>
<span id="block4">   </span>
<span id="block5">   </span>
<span id="block6">   </span>
<span id="block7">   </span>
<span id="block8">   </span>
<span id="block9">   </span>
</div></td>
</tr>
<tr><td align="center" id="complete"></td> </tr>
</tbody>
</table>
</body>
</html>

伺服器端：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";
//計數器
private int counter = 1;
//Initialize global variables
public void init() throws ServletException {
}

//處理get方法
public void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
//得到任務類型
String task = request.getParameter("task");
//返回的xml字串
String res = "";

//第一次，建立進度條
if (task.equals("create")){
res = "<key>1</key>";
counter = 1;
}else{
//完成百分比
String percent = "";
switch(counter){
case 1:percent = "10";break;
case 2:percent = "23";break;
case 3:percent = "35";break;
case 4:percent = "51";break;
case 5:percent = "64";break;
case 6:percent = "73";break;
case 7:percent = "89";break;
case 8:percent = "100";break;
}
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() {
}
}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More