JavaWeb项目实现文件上传动态显示进度实例

时间:2021-05-20

很久没有更新博客了,这段时间实在的忙的不可开交,项目马上就要上线了,要修补的东西太多了。当我在学习JavaWeb文件上传的时候,我就一直有一个疑问,网站上那些博客的图片是怎么上传的,因为当提交了表单之后网页就跳转了。后来我学习到了Ajax,我知道了浏览器可以异步的发送响应,这时我又有新的疑问,那就是在我上传一些文件的时候,那些网站的上传进度是怎么做到的,因为servlet直到上传完成之后才完成响应。

最近我们的项目中有一个地方中需要用到一个功能,当用户点击一个处理按钮时,前台会实时的显示后台处理动态,由于servlet一次只能接受一个请求,而且在servlet的生命周期结束时才会把响应数据发送到前台(这一点大家可以做个这样的测试:

response.getWriter().print("hello"); Thread.sleep(10000); response.getWriter().print("world");

你们会发现前台在等待了约10s后收到了"helloworld")。所以我想到了一个方法:使用单例保存实时信息。具体的实现方法就是,当用户点击了处理按钮时,在后台开启一个线程进行处理,并且每进行到一步,就向单例中写入当前状态信息。然后编写一个servlet,用于返回单例中的信息,前台循环发送请求,这样就能实现实时显示进度的效果。

好了,啰嗦了这么多,下面进入正题,如何实现上传文件动态显示进度,其实思想和上面的功能是一致的,我将这个功能分为三个点:

1.单例:用于保存进度信息;

2.上传servlet:用于上传文件并实时写入进度;

3.进度servlet:用于读取实时进度信息;

上代码,前台:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> #progress:after { content: '%'; }</style></head><body> <h3>File upload demo</h3> <form action="TestServlet" method="post" enctype="multipart/form-data" id="dataForm"> <input type="file" name="file" id="fileInput"> <br> <input type="submit" value="submit" id="submit"> </form> <div id="progress"></div> <script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script> <script type="text/javascript"> (function () { var form = document.getElementById("dataForm"); var progress = document.getElementById("progress"); $("#submit").click(function(event) { //阻止默认事件 event.preventDefault(); //循环查看状态 var t = setInterval(function(){ $.ajax({ url: 'ProgressServlet', type: 'POST', dataType: 'text', data: { filename: fileInput.files[0].name, }, success: function (responseText) { var data = JSON.parse(responseText); //前台更新进度 progress.innerText = parseInt((data.progress / data.size) * 100); }, error: function(){ console.log("error"); } }); }, 500); //上传文件 $.ajax({ url: 'UploadServlet', type: 'POST', dataType: 'text', data: new FormData(form), processData: false, contentType: false, success: function (responseText) { //上传完成,清除循环事件 clearInterval(t); //将进度更新至100% progress.innerText = 100; }, error: function(){ console.log("error"); } }); return false; }); })(); </script></body></html>

后台,单例:

import java.util.Hashtable;public class ProgressSingleton { //为了防止多用户并发,使用线程安全的Hashtable private static Hashtable<Object, Object> table = new Hashtable<>(); public static void put(Object key, Object value){ table.put(key, value); } public static Object get(Object key){ return table.get(key); } public static Object remove(Object key){ return table.remove(key); }}

上传servlet:

import java.io.File;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStream;import java.util.List;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.tomcat.util.http.fileupload.FileItem;import org.apache.tomcat.util.http.fileupload.FileUploadException;import org.apache.tomcat.util.http.fileupload.disk.DiskFileItemFactory;import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload;import org.apache.tomcat.util.http.fileupload.servlet.ServletRequestContext;import singleton.ProgressSingleton;@WebServlet("/UploadServlet")public class UploadServlet extends HttpServlet { private static final long serialVersionUID = 1L; public UploadServlet() { } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { DiskFileItemFactory factory = new DiskFileItemFactory(); factory.setSizeThreshold(4*1024); ServletFileUpload upload = new ServletFileUpload(factory); List<FileItem> fileItems; try { fileItems = upload.parseRequest(new ServletRequestContext(request)); //获取文件域 FileItem fileItem = fileItems.get(0); //使用sessionid + 文件名生成文件号 String id = request.getSession().getId() + fileItem.getName(); //向单例哈希表写入文件长度和初始进度 ProgressSingleton.put(id + "Size", fileItem.getSize()); //文件进度长度 long progress = 0; //用流的方式读取文件,以便可以实时的获取进度 InputStream in = fileItem.getInputStream(); File file = new File("D:/test"); file.createNewFile(); FileOutputStream out = new FileOutputStream(file); byte[] buffer = new byte[1024]; int readNumber = 0; while((readNumber = in.read(buffer)) != -1){ //每读取一次,更新一次进度大小 progress = progress + readNumber; //向单例哈希表写入进度 ProgressSingleton.put(id + "Progress", progress); out.write(buffer); } //当文件上传完成之后,从单例中移除此次上传的状态信息 ProgressSingleton.remove(id + "Size"); ProgressSingleton.remove(id + "Progress"); in.close(); out.close(); } catch (FileUploadException e) { e.printStackTrace(); } response.getWriter().print("done"); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); }}

进度servlet:

import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONObject;import singleton.ProgressSingleton;@WebServlet("/ProgressServlet")public class ProgressServlet extends HttpServlet { private static final long serialVersionUID = 1L; public ProgressServlet() { super(); // TODO Auto-generated constructor stub } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String id = request.getSession().getId(); String filename = request.getParameter("filename"); //使用sessionid + 文件名生成文件号,与上传的文件保持一致 id = id + filename; Object size = ProgressSingleton.get(id + "Size"); size = size == null ? 100 : size; Object progress = ProgressSingleton.get(id + "Progress"); progress = progress == null ? 0 : progress; JSONObject json = new JSONObject(); json.put("size", size); json.put("progress", progress); response.getWriter().print(json.toString()); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); }}

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章