大文件断点续传

前端之家收集整理的这篇文章主要介绍了大文件断点续传前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近项目较为清闲,研究了下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 onclick="upload()">上传</button>
		<button onclick="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",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,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!

原文链接:https://www.f2er.com/ajax/163231.html

猜你在找的Ajax相关文章