最近项目较为清闲，研究了下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