文件上傳過程中，如果我們能看到進度條會更好，實現(xiàn)思路是服務(wù)器端用監(jiān)聽器實時監(jiān)聽進度并存入session，客戶端異步請求服務(wù)器端獲得上傳進度，并進行效果渲染。
效果圖：
服務(wù)器端servlet：
public class UploadServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//取出監(jiān)聽器MyProgress在session中保存的進度信息
String progress=(String) req.getSession().getAttribute("progress");
//響應(yīng)
resp.getWriter().print(progress);
//清除session中保存的數(shù)據(jù)
// req.getSession().removeAttribute("progress");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
DiskFileItemFactory factory=new DiskFileItemFactory();
ServletFileUpload upload=new ServletFileUpload(factory);
upload.setProgressListener(new MyProgressListener(req));
try {
ListFileItem> list = upload.parseRequest(req);
for (FileItem fileItem : list) {
if (fileItem.isFormField()) {//普通表單
}else{//上傳文件
String path=req.getRealPath("uploads");
String fileName=fileItem.getName();
File file=new File(path, fileName);
fileItem.write(file);
System.out.println("成功上傳文件："+fileName);
}
}
} catch (Exception e) {
System.out.println("文件上傳發(fā)生錯誤！");
e.printStackTrace();
}
}
}
服務(wù)器端監(jiān)聽器：
public class MyProgressListener implements ProgressListener {
private HttpSession session;
public MyProgressListener(HttpServletRequest request){
session = request.getSession();
}
@Override
public void update(long pBytesRead, long pContentLength, int pItems) {
//將數(shù)據(jù)進行格式化
//已讀取數(shù)據(jù)由字節(jié)轉(zhuǎn)換為M
double readM=pBytesRead/1024.0/1024.0;
//已讀取數(shù)據(jù)由字節(jié)轉(zhuǎn)換為M
double totalM=pContentLength/1024.0/1024.0;
//已讀取百分百
double percent=readM/totalM;
//格式化數(shù)據(jù)
//已讀取
String readf=dataFormat(pBytesRead);
//總大小
String totalf=dataFormat(pContentLength);
//進度百分百
NumberFormat format=NumberFormat.getPercentInstance();
String progress=format.format(percent);
//將信息存入session
session.setAttribute("progress", progress);
//打印消息到控制臺
System.out.println("pBytesRead===>"+pBytesRead);
System.out.println("pContentLength==>"+pContentLength);
System.out.println("pItems===>"+pItems);
System.out.println("readf--->"+readf);
System.out.println("totalf--->"+totalf);
System.out.println("progress--->"+progress);
}
/**
* 格式化讀取數(shù)據(jù)的顯示
* @param data要格式化的數(shù)據(jù) 單位byte
* @return 格式化后的數(shù)據(jù)，如果小于1M顯示單位為KB，如果大于1M顯示單位為M
*/
public String dataFormat(double data){
String formdata="";
if (data>=1024*1024) {//大于等于1M
formdata=Double.toString(data/1024/1024)+"M";
}else if(data>=1024){//大于等于1KB
formdata=Double.toString(data/1024)+"KB";
}else{//小于1KB
formdata=Double.toString(data)+"byte";
}
return formdata.substring(0, formdata.indexOf(".")+2);
}
}
客戶端：
html>
head>
base href="%=basePath%>" rel="external nofollow" >
title>帶進度條的文件上傳效果/title>
meta http-equiv="pragma" content="no-cache">
meta http-equiv="cache-control" content="no-cache">
meta http-equiv="expires" content="0">
meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
meta http-equiv="description" content="This is my page">
style type="text/css">
#progressBar{width: 300px;height: 20px;border: 1px #EEE solid;}
#progress{width: 0%;height: 20px;background-color: lime;}
/style>
script type="text/javascript" src="js/jquery-1.4.2.js">/script>
script type="text/javascript">
function upload(){
$("#f1").submit();
var pro=null;
pro=setInterval(function(){
$.get("UploadServlet","",function(data){
if(data=='100%'){
clearInterval(pro);
$("#proInfo").text("上傳進度：100%");
//更新進度條
$("#progress").width("100%");
}else{//正在上傳
//更新進度信息
$("#proInfo").text("上傳進度："+data);
//更新進度條
$("#progress").width(data);
}
});
},200);
}
/script>
/head>
body>
iframe name="aa" style="display: none;">/iframe>
h2>帶進度條的文件上傳效果/h2>
form target="aa" id="f1" action="UploadServlet" method="post" enctype="multipart/form-data">
文件：input name="file" type="file">
input type="button" value="上傳" onclick="upload();">
div id="progressBar">
div id="progress">/div>
/div>
span id="proInfo">上傳進度：0%/span>
/form>
/body>
/html>
說明：為了讓上傳后該頁面不跳轉(zhuǎn)，我們可以讓表單跳轉(zhuǎn)至一個隱藏的iframe。
以上這篇基于fileUpload文件上傳帶進度條效果的實例(必看)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:- jQuery監(jiān)聽文件上傳實現(xiàn)進度條效果的方法
- jQuery實現(xiàn)文件上傳進度條特效
- 基于Ajax技術(shù)實現(xiàn)文件上傳帶進度條
- Jquery Uploadify多文件上傳帶進度條且傳遞自己的參數(shù)
