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

最新推荐文章于 2024-05-27 16:38:24 发布

dcrose

最新推荐文章于 2024-05-27 16:38:24 发布

阅读量7.7k

点赞数

分类专栏：前端 Java代码文章标签： JavaWeb 上传进度显示前端上传完成

前端同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

Java代码

13 篇文章 0 订阅

订阅专栏

如何实现上传文件动态显示进度，其实思想和上面的功能是一致的，我将这个功能分为三个点：

单例：用于保存进度信息；
上传servlet：用于上传文件并实时写入进度；
进度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>

 
 　后台，单例： 

 1 import java.util.Hashtable;
 2 
 3 public class ProgressSingleton {
 4     //为了防止多用户并发，使用线程安全的Hashtable
 5     private static Hashtable<Object, Object> table = new Hashtable<>();
 6     
 7     public static void put(Object key, Object value){
 8         table.put(key, value);
 9     }
10     
11     public static Object get(Object key){
12         return table.get(key);
13     }
14     
15     public static Object remove(Object key){
16         return table.remove(key);
17     }
18 }

　　上传servlet:

 1 import java.io.File;
 2 import java.io.FileOutputStream;
 3 import java.io.IOException;
 4 import java.io.InputStream;
 5 import java.util.List;
 6 
 7 import javax.servlet.ServletException;
 8 import javax.servlet.annotation.WebServlet;
 9 import javax.servlet.http.HttpServlet;
10 import javax.servlet.http.HttpServletRequest;
11 import javax.servlet.http.HttpServletResponse;
12 
13 import org.apache.tomcat.util.http.fileupload.FileItem;
14 import org.apache.tomcat.util.http.fileupload.FileUploadException;
15 import org.apache.tomcat.util.http.fileupload.disk.DiskFileItemFactory;
16 import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload;
17 import org.apache.tomcat.util.http.fileupload.servlet.ServletRequestContext;
18 
19 import singleton.ProgressSingleton;
20 
21 @WebServlet("/UploadServlet")
22 public class UploadServlet extends HttpServlet {
23     private static final long serialVersionUID = 1L;
24 
25     public UploadServlet() {
26     }
27 
28     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
29         
30         DiskFileItemFactory factory = new DiskFileItemFactory();
31         factory.setSizeThreshold(4*1024);
32         
33         ServletFileUpload upload = new ServletFileUpload(factory);
34         
35         List<FileItem> fileItems;
36         try {
37             fileItems = upload.parseRequest(new ServletRequestContext(request));
38             //获取文件域
39             FileItem fileItem = fileItems.get(0);
40             //使用sessionid + 文件名生成文件号
41             String id = request.getSession().getId() + fileItem.getName();
42             //向单例哈希表写入文件长度和初始进度
43             ProgressSingleton.put(id + "Size", fileItem.getSize());
44             //文件进度长度
45             long progress = 0;
46             //用流的方式读取文件，以便可以实时的获取进度
47             InputStream in = fileItem.getInputStream();
48             File file = new File("D:/test");
49             file.createNewFile();
50             FileOutputStream out = new FileOutputStream(file);
51             byte[] buffer = new byte[1024];
52             int readNumber = 0;
53             while((readNumber = in.read(buffer)) != -1){
54                 //每读取一次，更新一次进度大小
55                 progress = progress + readNumber;
56                 //向单例哈希表写入进度
57                 ProgressSingleton.put(id + "Progress", progress);
58                 out.write(buffer);
59             }
60             //当文件上传完成之后，从单例中移除此次上传的状态信息
61             ProgressSingleton.remove(id + "Size");
62             ProgressSingleton.remove(id + "Progress");
63             in.close();
64             out.close();
65         } catch (FileUploadException e) {
66             e.printStackTrace();
67         }
68         
69         response.getWriter().print("done");
70     }
71 
72     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
73         doGet(request, response);
74     }
75 
76 }

　　进度servlet：

 1 import java.io.IOException;
 2 
 3 import javax.servlet.ServletException;
 4 import javax.servlet.annotation.WebServlet;
 5 import javax.servlet.http.HttpServlet;
 6 import javax.servlet.http.HttpServletRequest;
 7 import javax.servlet.http.HttpServletResponse;
 8 
 9 import net.sf.json.JSONObject;
10 import singleton.ProgressSingleton;
11 
12 @WebServlet("/ProgressServlet")
13 public class ProgressServlet extends HttpServlet {
14     private static final long serialVersionUID = 1L;
15        
16     public ProgressServlet() {
17         super();
18         // TODO Auto-generated constructor stub
19     }
20 
21     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
22         
23         String id = request.getSession().getId();
24         String filename = request.getParameter("filename");
25         //使用sessionid + 文件名生成文件号，与上传的文件保持一致
26         id = id + filename;
27         Object size = ProgressSingleton.get(id + "Size");
28         size = size == null ? 100 : size;
29         Object progress = ProgressSingleton.get(id + "Progress");
30         progress = progress == null ? 0 : progress; 
31         JSONObject json = new JSONObject();
32         json.put("size", size);
33         json.put("progress", progress);
34         response.getWriter().print(json.toString());
35     }
36 
37     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
38         doGet(request, response);
39     }
40 
41 }

　　效果图：

dcrose

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
JavaWeb项目实现文件上传动态显示进度

如何实现上传文件动态显示进度，其实思想和上面的功能是一致的，我将这个功能分为三个点：单例：用于保存进度信息；上传servlet：用于上传文件并实时写入进度；进度servlet：用于读取实时进度信息；　　上代码，前台：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;Insert...
复制链接

扫一扫