这次给大家带来fileUpload上传文件带进度条效果的实现步奏，实现fileUpload上传文件带进度条效果的注意事项有哪些，下面就是实战案例，一起来看一下。
文件上传过程中，如果我们能看到进度条会更好，实现思路是服务器端用监听器实时监听进度并存入session，客户端异步请求服务器端获得上传进度，并进行效果渲染。
效果图：
服务器端servlet：
public class UploadServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //取出监听器MyProgress在session中保存的进度信息 String progress=(String) req.getSession().getAttribute("progress"); //响应 resp.getWriter().print(progress); //清除session中保存的数据// 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 { List 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("文件上传发生错误！"); e.printStackTrace(); } }}
登录后复制
服务器端监听器：
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) { //将数据进行格式化 //已读取数据由字节转换为M double readM=pBytesRead/1024.0/1024.0; //已读取数据由字节转换为M double totalM=pContentLength/1024.0/1024.0; //已读取百分百 double percent=readM/totalM; //格式化数据 //已读取 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); } /** * 格式化读取数据的显示 * @param data要格式化的数据 单位byte * @return 格式化后的数据，如果小于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); }}
登录后复制
客户端：
<base href="" rel="external nofollow" >带进度条的文件上传效果 #progressBar{width: 300px;height: 20px;border: 1px #EEE solid;} #progress{width: 0%;height: 20px;background-color: lime;} 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); }带进度条的文件上传效果
文件：上传进度：0%
登录后复制
说明：为了让上传后该页面不跳转，我们可以让表单跳转至一个隐藏的iframe。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
js请求servlet实现ajax请求的步骤详解
AJAX在不刷新的情况下检测输入的用户名
以上就是fileUpload上传文件带进度条效果的实现步奏的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2776874.html
