JavaWeb專案實現檔案上傳動態顯示進度
阿新 • • 發佈：2022-03-04
引用：https://www.cnblogs.com/dong-xu/p/6701271.html
很久沒有更新部落格了，這段時間實在的忙的不可開交，專案馬上就要上線了，要修補的東西太多了。當我在學習JavaWeb檔案上傳的時候，我就一直有一個疑問，網站上那些部落格的圖片是怎麼上傳的，因為當提交了表單之後網頁就跳轉了。後來我學習到了Ajax，我知道了瀏覽器可以非同步的傳送響應，這時我又有新的疑問，那就是在我上傳一些檔案的時候，那些網站的上傳進度是怎麼做到的，因為servlet直到上傳完成之後才完成響應。
最近我們的專案中有一個地方中需要用到一個功能，當用戶點選一個處理按鈕時，前臺會實時的顯示後臺處理動態，由於servlet一次只能接受一個請求，而且在servlet的生命週期結束時才會把響應資料傳送到前臺（這一點大家可以做個這樣的測試：
1 response.getWriter().print("hello");
2 Thread.sleep(10000);
3 response.getWriter().print("world");
，你們會發現前臺在等待了約10s後收到了"helloworld"）。所以我想到了一個方法：使用單例儲存實時資訊。具體的實現方法就是，當用戶點選了處理按鈕時，在後臺開啟一個執行緒進行處理，並且每進行到一步，就向單例中寫入當前狀態資訊。然後編寫一個servlet，用於返回單例中的資訊，前臺迴圈傳送請求，這樣就能實現實時顯示進度的效果。
好了，囉嗦了這麼多，下面進入正題，如何實現上傳檔案動態顯示進度，其實思想和上面的功能是一致的，我將這個功能分為三個點：
- 單例：用於儲存進度資訊；
- 上傳servlet：用於上傳檔案並實時寫入進度；
- 進度servlet：用於讀取實時進度資訊；
上程式碼，前臺：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <style type="text/css">
7 #progress:after {
8 content: '%';
9 }
10 </style>
11 </head>
12 <body>
13 <h3>File upload demo</h3>
14 <form action="TestServlet" method="post" enctype="multipart/form-data" id="dataForm">
15 <input type="file" name="file" id="fileInput"> <br>
16 <input type="submit" value="submit" id="submit">
17 </form>
18 <div id="progress"></div>
19 <script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
20 <script type="text/javascript">
21 (function () {
22 var form = document.getElementById("dataForm");
23 var progress = document.getElementById("progress");
24
25 $("#submit").click(function(event) {
26 //阻止預設事件
27 event.preventDefault();
28 //迴圈檢視狀態
29 var t = setInterval(function(){
30 $.ajax({
31 url: 'ProgressServlet',
32 type: 'POST',
33 dataType: 'text',
34 data: {
35 filename: fileInput.files[0].name,
36 },
37 success: function (responseText) {
38 var data = JSON.parse(responseText);
39 //前臺更新進度
40 progress.innerText = parseInt((data.progress / data.size) * 100);
41 },
42 error: function(){
43 console.log("error");
44 }
45 });
46 }, 500);
47 //上傳檔案
48 $.ajax({
49 url: 'UploadServlet',
50 type: 'POST',
51 dataType: 'text',
52 data: new FormData(form),
53 processData: false,
54 contentType: false,
55 success: function (responseText) {
56 //上傳完成，清除迴圈事件
57 clearInterval(t);
58 //將進度更新至100%
59 progress.innerText = 100;
60 },
61 error: function(){
62 console.log("error");
63 }
64 });
65 return false;
66 });
67 })();
68 </script>
69 </body>
70 </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 }
效果圖：https://stackoverflow.com/questions/42164380/asp-net-core-file-upload-progress-session
引用網址：
ASP.Net Core File Upload Progress Session
Ask Question Asked5 years ago Active5 years ago Viewed7k times 2I'm writing a file upload in ASP.Net Core and I'm trying to update a progress bar but when the Progress action is called from javascript, the session value isn't updated properly.
The progress is saved in the user Session using:
public static void StoreInt(ISession session, string key, int value)
{
session.SetInt32(key, value);
}
The upload:
$.ajax(
{
url: "/Upload",
data: formData,
processData: false,
contentType: false,
type: "POST",
success: function (data) {
clearInterval(intervalId);
$("#progress").hide();
$("#upload-status").show();
}
}
);
Getting the progress value:
intervalId = setInterval(
function () {
$.post(
"/Upload/Progress",
function (progress) {
$(".progress-bar").css("width", progress + "%").attr("aria-valuenow", progress);
$(".progress-bar").html(progress + "%");
}
);
},
1000
);
Upload Action:
[HttpPost]
public async Task<IActionResult> Index(IList<IFormFile> files)
{
SetProgress(HttpContext.Session, 0);
[...]
foreach (IFormFile file in files)
{
[...]
int progress = (int)((float)totalReadBytes / (float)totalBytes * 100.0);
SetProgress(HttpContext.Session, progress);
// GetProgress(HttpContext.Session) returns the correct value
}
return Content("success");
}
Progress Action:
[HttpPost]
public ActionResult Progress()
{
int progress = GetProgress(HttpContext.Session);
// GetProgress doesn't return the correct value: 0 when uploading the first file, a random value (0-100) when uploading any other file
return Content(progress.ToString());
}
1 Answer
13Alright, I used the solution suggested by @FarzinKanzi which is processing the progress client side instead of server side using XMLHttpRequest:
$.ajax(
{
url: "/Upload",
data: formData,
processData: false,
contentType: false,
type: "POST",
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var progress = Math.round((evt.loaded / evt.total) * 100);
$(".progress-bar").css("width", progress + "%").attr("aria-valuenow", progress);
$(".progress-bar").html(progress + "%");
}
}, false);
return xhr;
},
success: function (data) {
$("#progress").hide();
$("#upload-status").show();
}
}
);
Thank you for your help.
Share Improve this answer
xmlHttpRequestthat creates a live connection, But it is asp.net not mvc. Do you want that? –Farzin Kanzi Feb 13, 2017 at 15:20