上传时显示进度条

程序员文章站 2022-07-16 10:47:57

...

上传时使用common-fileupload，如果实现了ProgressListener接口，将进度信息保存到session中，这样可以随时了解上传的进度情况。进度条使用了一现成的jquery.progressbar。

上传图片时要预览图片，考虑到浏览器不兼容问题，最好是将图片上传到服务器，获取图片的服务器路径，通过session（将上传图片路径保存到session中）或者是其它的方式。不过要记得后续的上传要删除之前已上传到服务器的图片文件。

进度监听器

** * @author Evan 进度监听器 * */ public class CustomerProgressListener implements ProgressListener { private HttpServletRequest request; public CustomerProgressListener(HttpServletRequest request) { this.request = request; } @Override public void update(long bytesRead, long contentLength, int items) { // 将百分比保存到session中 double percentage = ((double) bytesRead / (double) contentLength); HttpSession session = this.request.getSession(); session.setAttribute("percentage", percentage); } }

上传servlet

/** * @author Evan 上传servlet * */ public class UploadServlet extends HttpServlet { private static final long serialVersionUID = -2720594804583840761L; @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { try{ FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); //设置进度监听 upload.setProgressListener(new CustomerProgressListener(req)); List items = upload.parseRequest(req); Iterator iter = items.iterator(); while (iter.hasNext()) { FileItem item = (FileItem) iter.next(); if (item.isFormField()){ } else { //String fieldName = item.getFieldName(); String fileName = item.getName(); //String contentType = item.getContentType(); System.out.println(); boolean isInMemory = item.isInMemory(); long sizeInBytes = item.getSize(); File uploadedFile = new File("H://" + System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf("."))); item.write(uploadedFile); } } }catch(Exception e){ e.printStackTrace(); } resp.getWriter().print("{msg:'上传成功!'}"); resp.getWriter().flush(); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { } }

进度servlet

public class ProgressServlet extends HttpServlet { private static final long serialVersionUID = 8057160912240634296L; //获取上传进度情况 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/plain"); PrintWriter out = response.getWriter(); HttpSession session=request.getSession(); Double percentage=0.0; if(session.getAttribute("percentage")!=null){ percentage=(Double)session.getAttribute("percentage"); double retVal=Math.floor(percentage*100); if(retVal == 100.0D){ session.removeAttribute("percentage"); } out.print("{retVal:"+retVal+"}"); }else{ out.print("{retVal:-1.0}"); } } }

jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>上传Demo</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <mce:script type="text/javascript" src="scripts/jquery.js" mce_src="scripts/jquery.js"></mce:script> <mce:script type="text/javascript" src="scripts/jquery.progressbar.min.js" mce_src="scripts/jquery.progressbar.min.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <form method="post" enctype="multipart/form-data" action="servlet/UploadServlet" target="iframeName"> <input type="file" name="uploadFileName" id="uploadFileName"><br> <input type="submit" value="上传" id="submit"> <span class="progressBar" id="pb1" style="display:none" mce_style="display:none"></span> </form> <iframe name="iframeName" id="iframeName" frameborder="0" style="display:none;" mce_style="display:none;"></iframe> </body> </html>

上一篇： selenium实践-如何验证警告、确认、提示信息

下一篇： g723源码详细分析-16-舒适噪声生成

上传时显示进度条

一个简单的ajax上传进度显示示例

原生javascript上传图片带进度条【实例分享】

jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例

Win10Edge打开网站时显示此网站需要Internet Explorer怎么取消?

在python tkinter中Canvas实现进度条显示的方法

微信小程序画布圆形进度条显示效果

无驱摄像头在游戏时不显示的解决方法小结

关于VS2005中C#代码用F12转到定义时,总是显示从元数据的问题

js ajax加载时的进度条代码

基于HTML5 Ajax文件上传进度条如何实现（jquery版本）