进度条

来源：互联网发布：淘宝店铺异常pc端处理编辑：程序博客网时间：2024/05/16 09:13

二种方法做到:

1.from 的提交listen

2.线程.

在页面上的提交按扭上,加一个JS.(目的是事件监听打开)

后台提交写一个线程,时时监听文件上传的进度.并把进度放在SESSION中.让JS时时去读取.

方法1:

upload.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Upload Image</title>
    <meta http-equiv="Cache-Control" content="no-store"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="js/jquery-1.2.3.js" type="text/javascript" charset="utf-8"></script>
</head>

                  if (percentage == -1){

                   if (uploadingFile){

                    progressBar.css("width",100*3);

                    progressBarHandler = window.clearInterval(progressBarHandler);
                    window.setTimeout(function(){
                     progressBar.css("width",100*3);
                             Editor.dialogs.ImageSource.hide();},1000);              uploadingFile = false;
                   }else{
                    progressBar.css("width",100*3);
                    progressBarHandler = window.clearInterval(progressBarHandler);
                   }

                   return;
                  }else{

                  progressBar.css("width",percentage*3);

                  }
                  //document.getElementById("progressBar").innerHTML =' percentage;
                  //$("#progressBar").html(percentage);


                }
               });//end of ajax




    },50);
     });

})
</script>

<body>

<div class="ui-dialog-titlebar"><span class="ui-dialog-title">Upload Image</span><div class="ui-dialog-titlebar-close"/></div>
<fieldset style="margin:5px;border:1px solid #CCCCCC;padding:0;font-size:11px;">
<form wicket:id="inviteFriendForm" id="inviteFriendForm" action="" method="post" enctype="multipart/form-data">
   <br>
   <div style="height:60px;">
     <input type="file" id="fileInput" wicket:id="fileInput" size="30"/>
     <div id="contentLoading"><div id="progressBar"></div> </div>
     <br>
     <br>
     <input id="uploadButton" type="submit" value="Upload!"/>
     <br>
   </div>
   <br>
   
</form>
</fieldset>
</body>
</html>

uploadinfo.jsp 输出进程的HMTL

<%@ page contentType="text/html; charset=utf-8" language="java" import="org.apache.wicket.extensions.ajax.markup.html.form.upload.UploadInfo" errorPage="" %>
<%
UploadInfo progress = (UploadInfo) session.getAttribute("org.apache.wicket.extensions.ajax.markup.html.form.upload.UploadWebRequest");
if (progress == null){
out.print("-1");
}else{
out.print(progress.getPercentageComplete());
}
%>

线程的方法:

new Thread() {

     @Override
     public void run() {

       try {
          while (progress != -1){
           Thread.sleep(200);

           HTTPsession.setAttribute("imageProgress", Double.toString(progress*1.0/progressValue));
          }
          HTTPsession.setAttribute("imageProgress", Integer.toString(1));
       } catch (InterruptedException e) { }

      // The bar is stopped automatically, if progress is done
     }
    }.start();