JavaWeb项目实现文件上传动态显示进度实例
更新时间：2017年04月13日 08:14:48 作者：DongXv
本篇文章主要介绍了JavaWeb项目实现文件上传动态显示进度实例，具有一定的参考价值，有兴趣的可以了解一下。
很久没有更新博客了，这段时间实在的忙的不可开交，项目马上就要上线了，要修补的东西太多了。当我在学习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);
}
}
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了SpringMVC的概念以及快速入门示例,SpringMVC 已经成为目前最主流的MVC框架之一,它通过一套注解，让一个简单的 Java 类成为处理请求的控制器，而无须实现任何接口,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Java参数传递实现代码及过程图解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
一文带你彻底了解Java8中的Lambda,函数式接口和Stream
这篇文章主要为大家详细介绍了解Java8中的Lambda,函数式接口和Stream的用法和原理，文中的示例代码简洁易懂，感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
随着网络技术的高速发展，计算机应用的普及，利用计算机对图书馆的日常工作进行管理势在必行，本篇文章手把手带你用Java实现一个图书管理系统,大家可以在过程中查缺补漏，提升水平2022-04-04
MyBatis-Plus作为MyBatis的增强版,提供了一系列实用的注解,如@TableName、@TableId、@TableField等,旨在简化数据库和Java实体类之间的映射及CRUD操作,通过这些注解,开发者可以轻松实现表映射、字段映射、逻辑删除、自动填充和乐观锁等功能2024-09-09
如果你想做定时任务，有高可用方面的需求，或者仅仅想入门快，上手简单，那么选用它准没错，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了MyBatis-Plus 通用IService使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
跟着思路走，之后从简单题入手，反复去看，做过之后可能会忘记，之后再做一次，记不住就反复做，反复寻求思路和规律，慢慢积累就会发现质的变化2022-03-03
SpringBoot过滤器如何获取POST请求的JSON参数
这篇文章主要介绍了SpringBoot过滤器如何获取POST请求的JSON参数操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-08-08
本篇文章主要介绍了详解SpringBoot定时任务说明，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
最新评论