WEB-based file upload progress control code implemented by AJAX and JSP page 1/2

1. Introduction 2. Implementation Code 2.1. Server code 2.1.1. File Upload Status (FileUploadStatus) 2.1.2. File Upload Status listening class (FileUploadListener) 2.1.3. BackGroundService) 2.1.4. File Upload Status control class (BeanControler) 2.2. client code 2.2.1. AjaxWrapper. js 2.2.2. fileUpload.html 2.2.3. result. jsp 2.2.4. fileUpload.css 2.3. Configuration File 3. Conclusion

1. Introduction Browser-based file upload, especially when the <input type = "file"> label is used to upload files, there is a serious performance problem because after the user submits the file, when the browser uploads a file to the server, the interface seems to be static. If it is a small file, it is better, if we need to upload a few megabytes, dozens of megabytes, or even hundreds of megabytes of files, I believe it is a very painful experience, and many of us should have had such an unbearable experience. (SMILE) Now I will provide a solution to this problem. We will implement a monitoring WEB upload Program-It not only uploads files to the server, in addition, "real-time" monitors the actual process of file upload. The basic idea of the solution is as follows: While submitting and uploading files in Form, AJAX is used to periodically Round-Robin the upload status information from Servlet. Then, update the progress bar and related text based on the information to reflect the file transmission status in a timely manner. If you cancel the upload operation, perform on-site cleanup: delete uploaded files and display related information on the Form submission page. If the upload is complete, the content (or link) of the uploaded file is displayed) Before introducing the source code, let's take a look at the program running interface: 2. Implementation Code The implementation code includes the server-side code and client-side code (haha). Let's start with the server-side. 2.1. server code 2.1.1. File Upload Status (FileUploadStatus) Use the FileUploadStatus class to record the file upload status and use it as a medium for communication between the server and the web Client. By providing the upload status for this class object as a server response, it is sent to the web Client, the web client uses JavaScript to obtain the file upload status. The source code is as follows: /*** This routine demonstrates the progress of uploading files through the Web. You can modify and use this routine. * If You Need To reprint this routine, please indicate the author. ** Author: Liu zuochen * EMail: liuzuochen@gmail.com */package liuzuochen. sample. upload; import java. util. *; public class FileUploadStatus {// upload user address private String uploadAddr; // total number of uploads: private long uploadTotalSize = 0; // The total number of reads: private long readTotalSize = 0; // private int currentUploadFileNum = 0; // number of successfully uploaded files; private int successUploadFileCount = 0; // status private String status = ""; // Processing start time private long processStartTime = 0l; // processing end time private long processEndTime = 0l; // processing execution time private long processRunningTime = 0l; // Upload File URL List private List uploadFileUrlList = new ArrayList (); // cancel uploading private boolean cancel = false; // upload the base Directory private String baseDir = ""; public FileUploadStatus () {} public String getBaseDir () {return baseDir;} public void setBaseDir (String baseDir) {this. baseDir = baseDir;} public boolean getCancel () {return cancel;} public void setCancel (boolean cancel) {this. cancel = cancel;} public List getUploadFileUrlList () {return uploadFileUrlList;} public void setUploadFileUrlList (List uploadFileUrlList) {this. uploadFileUrlList = uploadFileUrlList;} public long getProcessRunningTime () {return processRunningTime;} public void setProcessRunningTime (long processRunningTime) {this. processRunningTime = processRunningTime;} public long getProcessEndTime () {return processEndTime;} public void setProcessEndTime (long processEndTime) {this. processEndTime = processEndTime;} public long getProcessStartTime () {return processStartTime;} public void setProcessStartTime (long processStartTime) {this. processStartTime = processStartTime;} public long getReadTotalSize () {return readTotalSize;} public void setReadTotalSize (long readTotalSize) {this. readTotalSize = readTotalSize;} public int getSuccessUploadFileCount () {return successUploadFileCount;} public void setSuccessUploadFileCount (int successUploadFileCount) {this. successUploadFileCount = successUploadFileCount;} public int getCurrentUploadFileNum () {return currentUploadFileNum;} public void setCurrentUploadFileNum (int currentUploadFileNum) {this. currentUploadFileNum = currentUploadFileNum;} public String getStatus () {return status;} public void setStatus (String status) {this. status = status;} public long getUploadTotalSize () {return uploadTotalSize;} public String getUploadAddr () {return uploadAddr;} public void setUploadTotalSize (long uploadTotalSize) {this. uploadTotalSize = uploadTotalSize;} public void setUploadAddr (String uploadAddr) {this. uploadAddr = uploadAddr;} public String toJSon () {StringBuffer strJSon = new StringBuffer (); strJSon. append ("{UploadTotalSize :"). append (getUploadTotalSize ()). append (","). append ("ReadTotalSize :"). append (getReadTotalSize ()). append (","). append ("CurrentUploadFileNum :"). append (getCurrentUploadFileNum ()). append (","). append ("SuccessUploadFileCount :"). append (getSuccessUploadFileCount ()). append (","). append ("Status :'"). append (getStatus ()). append ("',"). append ("ProcessStartTime :"). append (getProcessStartTime ()). append (","). append ("ProcessEndTime :"). append (getProcessEndTime ()). append (","). append ("ProcessRunningTime :"). append (getProcessRunningTime ()). append (","). append ("Cancel :"). append (getCancel ()). append ("}"); return strJSon. toString ();}} 2.1.2. File Upload Status listening class (FileUploadListener) Use Common-FileUpload 1.2 (20070103 ). This version provides a ProcessListener interface that monitors file uploads. This allows developers to implant their own Listener through the setProcessListener method of FileUploadBase objects. The FileUploadListener class implements ProcessListener. During the entire file upload process, it monitors the upload progress and updates the upload status Bean in real time based on the upload status. The source code is as follows: /*** This routine demonstrates the progress of uploading files through the Web. You can modify and use this routine. * If You Need To reprint this routine, please indicate the author. ** Author: Liu zuochen * EMail: liuzuochen@gmail.com */package liuzuochen. sample. upload; import org. apache. commons. fileupload. progressListener; import javax. servlet. http. httpServletRequest; public class FileUploadListener implements ProgressListener {private HttpServletRequest request = null; public FileUploadListener (HttpServletRequest request) {this. request = request;}/*** update Status */public void update (long pBytesRead, long pContentLength, int pItems) {FileUploadStatus statusBean = BackGroundService. getStatusBean (request); statusBean. setUploadTotalSize (pContentLength); // read if (pContentLength =-1) {statusBean. setStatus ("complete reading of" + pItems + "files: Read" + pBytesRead + "bytes. "); statusBean. setReadTotalSize (pBytesRead); statusBean. setSuccessUploadFileCount (pItems); statusBean. setProcessEndTime (System. currentTimeMillis (); statusBean. setProcessRunningTime (statusBean. getProcessEndTime (); // reading} else {statusBean. setStatus ("currently processing" + pItems + "file: Read" + pBytesRead + "/" + PContentLength + "bytes. "); statusBean. setReadTotalSize (pBytesRead); statusBean. setCurrentUploadFileNum (pItems); statusBean. setProcessRunningTime (System. currentTimeMillis ();} BackGroundService. saveStatusBean (request, statusBean );}}