首先简短解释下断点续传的原理:
客户端选取文件,通过webuploader进行MD5然后进行分片,每一个分片均需要进行上传前检查(检查当前分片时候已经上传),如果没有上传就开始进行上传,最后在上传完成之后会调用一个合并的操作,在后台将所有分片依次合并,按照指定文件名生成文件。
1.准备工作:
1)前端使用jquery(jquery-1.10.2.js),webuploader插件(webuploader-0.1.5)
2)后台准备 springMvc(使用注解,配置requestMapping)
3)开发环境 jsp,MyEclipse 1.0
2.开发步骤:
1)集成springMvc,此处步骤相对简单(可按照: http://www.jianshu.com/p/0ccaa4af05fc)。
2)导入jquery , webuploader,编写前台页面,代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/root/comm/jsp/tags.jsp"%>断点续传 选择文件
-----------------------------------------------------------------华丽的分割线--------------------------------------------------
至此前台代码已经完成:
3)开始编写后台代码:
@Controller @RequestMapping("/system/upload") public class TestUpload { String serverPath = "d:\\"; //临时目录 /* * 保存文件,数据块 */ @SuppressWarnings("unchecked") @RequestMapping("testUploadSaveFile.htm") public void saveFile(HttpServletRequest request, HttpServletResponse response) { DiskFileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); try { Listitems = upload.parseRequest(request); UploadUtil.saveChunkData(items); } catch (FileUploadException e) { e.printStackTrace(); } } //合并上传文件 @RequestMapping("testUploadMergeUploadFile.htm") public void mergeUploadFile(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("进入合并后台..."); String action = request.getParameter("action"); String saveFilePath = ConfigUtil.getInstance().getProValue("saveChunkFilePath"); String fileMd5 = request.getParameter("fileMd5"); if("mergeChunks".equals(action)){ UploadUtil.mergeUploadFile(saveFilePath, fileMd5); } else if("checkChunk".equals(action)){ // 当前分块下标 String chunk = request.getParameter("chunk"); // 当前分块大小 String chunkSize = request.getParameter("chunkSize"); String yesOrNoFlag = UploadUtil.checkChunk(saveFilePath+"/"+fileMd5, chunk, chunkSize); if(yesOrNoFlag.equals("1")){ response.getWriter().write("{\"ifExist\":"+yesOrNoFlag+"}"); } else{ response.getWriter().write("{\"ifExist\":"+yesOrNoFlag+"}"); } } } }
具体的上传方法我已经抽象出来了(上述代码中的UploadUtil.mergeUploadFile(saveFilePath, fileMd5),UploadUtil.saveChunkData(items))两个方法。
),
代码如下:
哟,抽象出来的还是放在附件中了(UploadUtil.java),这样大家想用的话直接复制就好。^_^^_^^_^^_^^_^
好了,到目前未知我们所有的工作都已经完成了,就可以直接将代码发布在中间件上,直接查看方才编写的
jsp了。
正常情况下都是可以上传成功的,并且有进度条显示上传的进度。
如果不成功的话,可参照一下步骤检查:
1.WebUploader.Uploader.register (1.2.3) 三个方法必须放置在最前边,且不能放置在$(function(){...})
中,都则1.2.3三个方法不生效,原因是作用域链问题。
2.同一个分片多次上传仍然覆盖问题,每一个分片检查完成之后的放行,阻断方法问题,deferred.reject();
deferred.resolve(); 主要是deferred 延迟对象在检查完成之后不管结果全部放行。解决方案: 严格按照我代码中的写法,就没有问题。
最后如果还有什么问题,比如发现代码中逻辑错误,不够严谨,都可以直接联系我,
微信: ma0603kang