大文件断点续传

最新推荐文章于 2023-07-20 11:45:22 发布

谦逊的网虫

最新推荐文章于 2023-07-20 11:45:22 发布

阅读量1.8k

点赞数

分类专栏： JAVA Web前端文章标签：断点续传 XMLHttpRequest Ajax上传文件上传进度回显

本文链接：https://blog.csdn.net/Netbug_NB/article/details/46637243

版权

JAVA 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Web前端

4 篇文章 0 订阅

订阅专栏

最近项目较为清闲，研究了下Html5新增的几个重要技术点，如操作文件系统、获取摄像头麦克风、本地图片预览、Ajax上传文件等。灵光一现，我有了一个“墨迹”的想法：通过浏览器获取影音数据并实时存储到本地磁盘上，再接着后台默默上传该文件，达到视频录像伪实时备份的目的。然而经过两三天的琢磨研究，有一问题怎么也未能解决：从UserMedia中如何获得视音频流？（目前能力有限，先留着以后继续研究）。哎，功亏一篑啊。

不过，一事还是值得记录和分享的，那就是大文件断点续传！总体思路：用js获取文件的相关属性如name、size、type、lastModified等，发送给后台用于确定文件唯一性（我用的是它们4个的MD5散列值，最好是JS给出整个文件的MD5值）；上传之前先check，看看已经上传多少字节了；后续上传时只上传未曾上传过的字节。废话不多说，上代码！注释很清晰哦！

界面效果

Html代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>大文件断点续传</title>
<link rel="stylesheet" href="../public/css/bootstrap.css">
</head>
<body>
	<div class="container-fluid">
		<input type="file" id="file" name="file">
		<progress id="progress"></progress>
		<button οnclick="upload()">上传</button>
		<button οnclick="abort()">暂停</button>
	</div>
</body>
<script>
	var xhr = new XMLHttpRequest();//上传请求
	xhr.onreadystatechange = function() {//上传状态监听
		console.log(xhr.readyState + "-" + xhr.status + "-" + xhr.responseText);
		if (xhr.readyState == 4 && xhr.status == 200) {
			alert("上传成功");
		}
	};
	var proEle = document.getElementById("progress");
	var loaded = 0;//记录服务器上已上传成功的字节数
	xhr.upload.onprogress = function(e) {//上传进度监听
		proEle.value = loaded + e.loaded;
	};
	
	//暂停方法
	function abort() {
		xhr.abort();
	}
	
	/**上传方法。
	 * 上传之前先check,查询已上传字节数。
	 * 若字节数为“0”表示文件未上传过，若字节数等于待上传文件大小表示文件曾经上传成功过，无需再次上传。
	 */
	function upload() {
		var fileEle = document.getElementById("file");
		var file = fileEle.files[0];
		var param = "name=" + file.name + "&size=" + file.size + "&type="
				+ file.type + "&lastModified=" + file.lastModified;//后台通过name、size、type、lastModified四个属性来确定文件唯一性。
		/**
		 * 进度条初始化
		 */
		proEle.value = 0;
		proEle.max = file.size;

		var xhrCheck = new XMLHttpRequest();//检查请求
		xhrCheck.onreadystatechange = function() {//检查状态监听，成功后执行发送上传请求
			if (xhrCheck.status == 200 && xhrCheck.readyState == 4) {
				loaded = parseInt(xhrCheck.responseText);
				proEle.value = loaded;

				if (loaded < file.size) {
					xhr.open("POST", "/web/api/device/upload?" + param, true);
					xhr.send(file.slice(loaded, file.size, file.type));//通过File.slice方法获得未上传过的数据信息,再上传（重点）
				} else {
					alert('文件已存在');
				}
			}
		};
		xhrCheck.open("GET", "/web/api/device/check?" + param, true);
		xhrCheck.send();//发送检查请求
	}
</script>
</html>

Java代码

@RequestMapping(value = "/check", method = RequestMethod.GET)
	@ResponseBody
	/**
	 * 上传检查。
	 * 上传之前先check,查询已上传字节数。文件不存在就返回0
	 * @param request
	 * @return
	 */
	public String check(HttpServletRequest request) {
		String name = request.getParameter("name");
		String size = request.getParameter("size");
		String type = request.getParameter("type");
		String lastModified = request.getParameter("lastModified");
		String fileID = new SimpleHash("MD5", name, ByteSource.Util.bytes(size
				+ type + lastModified), 2).toHex();// 通过name、size、type、lastModified四个属性来确定文件唯一性——MD5散列值。
		String fileName = fileID + "-" + name;
		File file = new File("D://" + fileName);
		if (!file.exists()) {
			return "0";
		} else {
			return file.length() + "";
		}
	}

	@RequestMapping(value = "/upload", method = RequestMethod.POST)
	@ResponseBody
	/**
	 * 上传方法
	 * 主体就是将InputStream流中的数据写入目标文件中，注意是append
	 * @param request
	 * @return
	 */
	public String upload(HttpServletRequest request) {
		String name = request.getParameter("name");
		String size = request.getParameter("size");
		String type = request.getParameter("type");
		String lastModified = request.getParameter("lastModified");
		String fileID = new SimpleHash("MD5", name, ByteSource.Util.bytes(size
				+ type + lastModified), 2).toHex();// 通过name、size、type、lastModified四个属性来确定文件唯一性——MD5散列值。
		String fileName = fileID + "-" + name;
		ServletInputStream is = null;
		FileOutputStream os = null;
		File file = null;
		try {
			is = request.getInputStream();
			BufferedInputStream bis = new BufferedInputStream(is);
			byte[] b = new byte[1024 * 1024];
			file = new File("D://" + fileName);
			if (!file.exists()) {
				file.createNewFile();
			}
			os = new FileOutputStream(file, true);// append
			int n = 0;
			while ((n = bis.read(b)) > 0) {
				os.write(b, 0, n);
			}
		} catch (IOException e) {
			e.printStackTrace();
		} finally {
			try {
				os.close();
				is.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		return "SUCCESS";
	}

写在最后

断点续传老的做法是将大文件分割成N个的小文件再已Form表单形式上传，进而后台进行类似文件拼接的相关操作。效率还可以，但颗粒度就没有上面新的方法细了，哈哈。上面的新方法颗粒度直接精确到字节了。科技在发展，社会在进步，码农也能少费点脑子敲代码，留着打DOTA了！

Best Wishes For You!

谦逊的网虫

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
大文件断点续传

最近项目较为清闲，研究了下Html5新增的几个重要技术点，如操作文件系统、获取摄像头麦克风、本地图片预览、Ajax上传文件等。灵光一现，我有了一个“墨迹”的想法：通过浏览器获取影音数据并实时存储到本地磁盘上，再接着后台默默上传该文件，达到视频录像伪实时备份的目的。然而经过两三天的琢磨研究，有一问题怎么也未能解决：从UserMedia中如何获得视音频流？（目前能力有限，先留着以后继续研究）。哎，功亏
复制链接

扫一扫