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

allway2

已于 2022-03-17 20:02:40 修改

阅读量1.4k

点赞数

文章标签： javascript ajax java

于 2022-03-17 17:03:55 首次发布

本文链接：https://blog.csdn.net/allway2/article/details/123555116

版权

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

Javascript Ajax 进度条实现

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

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

示例项目示例

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

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

Eclipse 项目结构

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();
		}
	}

}