使用进度条在 Java 中上传多个文件 – Ajax

忘是亡心i 2023-09-30 09:46 10阅读 0赞

如今，大多数 Web 应用程序都使用**带有进度条**用户界面 ( **UI** ) 的文件上传。本文将帮助您了解如何通过纯**Javascript Ajax**来完成。在这里，我们将讨论更多关于开发作为**前端 UI**部分的进度条的内容。在服务器端，我们使用**Java Servlet**来处理它。如果您有兴趣了解有关服务器端实现的更多信息，可以访问我们的文章[文件上传 Java Servlet 示例][Java Servlet]。

![06c4bd8adf2de5e59cde84000a403157.png][]

*  [Javascript Ajax 进度条实现][Javascript Ajax]
 *  [示例项目示例][Link 1]
    
     *  [Eclipse 项目结构][Eclipse]
        
         *  [文件上传.html][.html]
         *  [FileUploadServlet.java][]
         *  [pom.xml][]
 *  [结论][Link 2]

### Javascript Ajax 进度条实现 ###

让我们通过参考以下示例示例来了解示例点的实现 -

1.  在下面的示例中，我们使用一些全局变量（**totalFileSize、totalUploadedSize、totalFileCount、fileUploadedCount**）来存储特定数据。
2.  当用户点击**上传按钮**时，该函数`startUploading()`将被调用。这是文件上传的启动功能。在这里，我们正在初始化定义的全局变量。
3.  这里我们使用`XMLHttpRequest`Javascript 类对象来执行**Ajax 调用**。你可以在函数中看到`uploadFile()`。
4.  `FormData`一个类对象用于使用`append()`方法附加多部分文件以上传它。
5.  **progress**，**load**和**error**是文件上传时触发的事件。因此，我们将分别用函数、、和绑定这些**事件**。`onUploadProgress()``onUploadComplete()``onUploadError()`
6.  该函数`onUploadProgress()`将被不断调用并更新进度条。这里**e.loaded**会告诉我们有多少字节上传到服务器，因此我们正在**计算进度条的百分比**。
7.  `onUploadComplete()`当文件完全上传到服务器时，将调用该函数。在这里，如果还有更多文件尚未上传，我们将执行下一个 ajax 调用，否则会**更新 100% 的进度条**。
8.  当上传文件发生错误时，将调用函数**onUploadError() 。**

### 示例项目示例 ###

我们将创建一个 Eclipse Maven 应用程序。在此应用程序中，需要创建以下文件：

*  ***文件上传.html***
 *  ***FileUploadServlet.java***
 *  ***pom.xml***

#### Eclipse 项目结构 ####

![699e43964e72435874a0565e2b68dcd9.png][]

*filesupload.html*

<!DOCTYPE PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head><title>JavaCodePoint</title></head>
    <body>
    	<div style="border:1px solid #9a9a9a;padding:0px 20px 40px;width:50%;">
    		<h2>Simple File Upload With Progress Bar</h2><hr>
    		<div style="margin-bottom: 20px">
    			<input type="file" id="files" multiple style="margin-bottom: 20px" /><br />
    			<input type="button" value="Upload" onclick="startUploading()"/>
    		</div>
    		<div id='progress-bar-container' style='height: 20px;border: 1px solid #9a9a9a;'>
    			<div id='progress-bar' style='height: 100%; background: #197d19; width: 0%'></div>
    		</div>
    		<div id="uploding-file"></div>
    	</div>
    </body>
    <script>
    	/* Globle variables */
    	var totalFileSize, totalUploadedSize, totalFileCount, fileUploadedCount;
    	
    	/* start uploading files */
    	function startUploading() {
    		var files=document.getElementById('files').files;
    		totalFileCount = files.length;
    		totalUploadedSize = 0;
    		fileUploadedCount = 0;
    		totalFileSize = 0;		
    		for (var i = 0; i < totalFileCount; i++) {
    			totalFileSize += files[i].size;
    		}
    		// upload through ajax call
    		uploadFile();
    	}
    	
    	/* one by one file will be uploaded to the server by ajax call*/
    	function uploadFile() {
    		var file = document.getElementById('files').files[fileUploadedCount];
    		var xhr = new XMLHttpRequest();
    		var fd = new FormData();		
    		fd.append("multipartFile", file);
    		xhr.upload.addEventListener("progress", onUploadProgress, false);
    		xhr.addEventListener("load", onUploadComplete, false);
    		xhr.addEventListener("error", onUploadError, false);
    		xhr.open("POST", "UploadServlet");
    		xhr.send(fd);
    		// update which file is uploading
    		document.getElementById('uploding-file').innerHTML="Uploading "+file.name;
    	}
    	
    	/* This function will continueously update the progress bar */
    	function onUploadProgress(e) {
    		if (e.lengthComputable) {
    			var percentComplete = parseInt((e.loaded + totalUploadedSize) * 100	/ totalFileSize);
    			var bar = document.getElementById('progress-bar');
    			bar.style.width = percentComplete + '%';
    			bar.innerHTML = percentComplete + ' % complete';
    		} else {
    			alert('unable to compute');
    		}
    	}
    	
    	/* This function will call when upload is completed */
    	function onUploadComplete(e) {
    		totalUploadedSize += document.getElementById('files').files[fileUploadedCount].size;
    		fileUploadedCount++;
    		if (fileUploadedCount < totalFileCount) {
    			//ajax call if more files are there 
    			uploadFile();
    		} else {
    			var bar = document.getElementById('progress-bar');
    			bar.style.width = '100%';
    			bar.innerHTML = '100% complete';
    			document.getElementById('uploding-file').innerHTML="";
    		}
    	}
    
    	/* This function will call when an error come while uploading */
    	function onUploadError(e) {
    		alert("Something went wrong!");
    	}
    </script>
    </html>

*FileUploadServlet.java*

package com.javacodepoint.fileupload;
    
    import java.io.File;
    import java.io.IOException;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.MultipartConfig;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.Part;
    /**
     * 
     * @author javacodepoint
     *
     */
    @WebServlet("/UploadServlet")
    @MultipartConfig(fileSizeThreshold = 1024 * 1024 * 2, // 2MB
    		maxFileSize = 1024 * 1024 * 500, // 500MB
    		maxRequestSize = 1024 * 1024 * 1024) // 1GB
    public class FileUploadServlet extends HttpServlet {
    	
    	/**
         * Location to save uploaded files on server
         */
    	private static final String UPLOAD_PATH = "C:/uploads";
    	
    	/**
         * Method to get file name from HTTP header content-disposition
         */
    	private String getFileName(Part part) {
    		String contentDisp = part.getHeader("content-disposition");
    		String[] items = contentDisp.split(";");
    		for (String s : items) {
    			if (s.trim().startsWith("filename")) {
    				return s.substring(s.indexOf("=") + 2, s.length() - 1);
    			}
    		}
    		return null;
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		try {
    			File uploadsPath = new File(UPLOAD_PATH);
    			if (!uploadsPath.exists()) {
    				//create upload folder if not exist.
    				uploadsPath.mkdir();
    			}
    			for (Part part : request.getParts()) {
    				String fileName = getFileName(part);
    				if(fileName!=null) {
    					part.write(UPLOAD_PATH + File.separator + fileName);
    				}
    			}
    			System.out.println("File uploaded successfully!");
    		} catch (Exception e) {
    			System.err.println("Error while uploading files!");
    			e.printStackTrace();
    		}
    	}
    
    }

### 结论 ###

在本文中，您已经了解了如何使用 Java 开发多文件上传。您还了解了如何创建进度条用户界面，以便在上传多个文件时获得最佳用户体验。

要了解有关服务器端实现的更多信息，您可以访问我们的文章： *[Java Servlet 示例中的文件上传][Java Servlet]。*

创建拖放文件上传器 UI 以一次上传单个和多个文件。访问另一篇文章： ***[拖放文件上传器 UI][UI]***。

[Java Servlet]: http://javacodepoint.com/file-upload-in-java-servlet-example/
[06c4bd8adf2de5e59cde84000a403157.png]: https://img-blog.csdnimg.cn/img_convert/06c4bd8adf2de5e59cde84000a403157.png
[Javascript Ajax]: https://javacodepoint.com/multiple-file-upload-in-java-with-progress-bar-ajax/#Javascript_Ajax_Progress_Bar_Implementation
[Link 1]: https://javacodepoint.com/multiple-file-upload-in-java-with-progress-bar-ajax/#Sample_Project_Example
[Eclipse]: https://javacodepoint.com/multiple-file-upload-in-java-with-progress-bar-ajax/#Eclipse_Project_Structure
[.html]: https://javacodepoint.com/multiple-file-upload-in-java-with-progress-bar-ajax/#filesuploadhtml
[FileUploadServlet.java]: https://javacodepoint.com/multiple-file-upload-in-java-with-progress-bar-ajax/#FileUploadServletjava
[pom.xml]: https://javacodepoint.com/multiple-file-upload-in-java-with-progress-bar-ajax/#pomxml
[Link 2]: https://javacodepoint.com/multiple-file-upload-in-java-with-progress-bar-ajax/#Conclusion
[699e43964e72435874a0565e2b68dcd9.png]: https://img-blog.csdnimg.cn/img_convert/699e43964e72435874a0565e2b68dcd9.png
[UI]: https://javacodepoint.com/drag-and-drop-file-upload-using-javascript/