web前端分片上传demo(基于webuploader)

阅读更多

首先简短解释下断点续传的原理：

     客户端选取文件，通过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"%>














	
	

		

		
选择文件
		开始上传
		

			

				0% 
			
			

		
	

 -----------------------------------------------------------------华丽的分割线--------------------------------------------------

 

至此前台代码已经完成：

  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 {
			List items = 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