无插件实现大文件分片上传，断点续传

立即下载用AI写一个

发布时间：2017-11-10

25人 | 浏览：4809次 | 收藏 |

技术：jdk 1.6+servlet+JavaScript+Html+CSS

运行环境：tomcat 7+

概述

大文件分片上传、文件验证、断点续传、手动重试上传等需求的在实际开发中经常遇到，有着广泛的使用场景

详细

###1. 简介：
本篇文章基于实际项目的开发，将介绍项目中关于大文件分片上传、文件验证、断点续传、手动重试上传等需求的使用场景及实现；

###2. 项目需求
 #####1. 在一个音视频的添加中，既要有音视频的简介(如音视频内容文字介绍、自定义主题名称等一些基本的信息)，又要有音视频所需要的多个文件(就像电视剧，一部电视剧有多集一样)。在数据库中具体表现为一对多的关系，即一个视频对应多个文件。`下文就以电视剧为例`
 
 #####2. 如果一个电视剧中，既有上百兆的，也有几十兆的视频，但是如果在不稳定的一个网络环境中，c传输大文件时，客户想先把小的视频上传了，之后再来继续传未传完的大文件声誉部分，这就需要断点续传的功能；
 
 #####3. 电视剧中至少有一集(至少有一个文件)，无文件的电视剧基本信息无效；

### 3. 需求分析
#####1. 确定电视剧基本信息(自定义名称，内容简介、演员简介、播出时间等)及文件的上传方式
    - 基本信息和音视频文件分开上传(因为在原有的数据库表设计中，文件表是关联于基本信息，所以必须要有音视频主键，才能在数据库添加对应的文件信息)，取得基本信息主键之后再去上传文件；

#####2. 文件断点续传中，如何分片；文件接收方式；服务器端如何判断是哪个文件的分片；如何拼接各个分片；上传过程中发生意外情况(如断网，关闭浏览器)，如何处理？
	- 分片方式： 在客户端进行分片；
	- 服务器端接收方式：使用MultipartFile接收文件
	- 服务器端确定是哪个文件的分片： 在客户端按照一定规则(UUID或其他方式)生成唯一名称，在服务器端直接找到与该名称相同的文件片段；
	-  拼接文件分片： 使用NIO的方式，将分片追加到已有分片的后面；
	- 上传中发生意外： 
		A.  断网： 该情况类似于暂停上传，上传到文件处于暂停状态，网络恢复，即可点击继续上传按钮，继续上传；
		B.  关闭浏览器： 在关闭时，给用户提示框，询问是否继续保存，若不保存，则根据视频基本信息表的主键的删除脏数据；
		C.  第一个文件在上传时候，被用户取消或者断网，则服务器端未修改基本信息为有效，并且也未标记该文件为有效记录，可以理解为脏数据，但不需要清理这些数据(在查询的时候，不能查出这些无效记录，可以在更新视频基本信息记录的时候，查找这些脏数据，并清理磁盘上及数据表中的记录)；
		
		
###4. 实现

#####1. 基于以上分析，搭建一个简单的web项目工程，如下图：
![](/contentImages/image/20171109/2sbdr3oRgZhd5l61jtO.png)

#####2. 前端主要功能实现

```javascript
// 文件分割上传
		// 文件大小和分割起点
		// 注释的是本地存储实现
		var size = file.size, start = localStorage[fileid] * 1 || 0;
		//start = $("filelist_" + fileid).filesize;
		console.log("start1："+start);
		if (size == start) {
			// 已经传过了
			fileArray.shift();
			if (delete fileArray[fileid]) console.log(fileArray.join() + "---上传成功");
			objStateElement.success(fileid, now);
			// 回调
			onsuccess.call(fileid, {});
			localStorage.clear();
			return;
		}
		
		var funFileSize = function() {
			if (file.flagPause == true) {
				onpause.call(fileid);
				return;
			}
			var data = new FormData();
			data.append("name", encodeURIComponent(file.name));
			data.append("fileid", fileid);
			data.append("file", file.slice(start, start + fileSplitSize));
			data.append("start", start + "");
			var p = "?name="+encodeURIComponent(file.name)+"&fileid"+fileid+"&start"+start;
			// XMLHttpRequest 2.0 请求
			var xhr = new XMLHttpRequest();
			xhr.open("post", eleForm.action, true);				
			// 上传进度中
			xhr.upload.addEventListener("progress", function(e) {
				objStateElement.backgroundSize(fileid, (e.loaded + start) / size * 100);
			}, false);
			// ajax成功后
			xhr.onreadystatechange = function(e) {
				if (xhr.readyState == 4) {
					if (xhr.status == 200) {
						try {
							var json = JSON.parse(xhr.responseText);
						} catch (e) {
							objStateElement.error(fileid);
							return;
						} 
						//var json = JSON.parse(xhr.responseText);
						if (!json || !json.succ) {
							objStateElement.error(fileid);
							onerror.call(fileid, json);
							return;
						}
						
						if (start + fileSplitSize >= size) {
							// 超出，说明全部分割上传完毕
							// 上传队列中清除者一项
							fileArray.shift();
							if (delete fileArray[fileid]) console.log(fileArray.join() + "---上传成功");
							objStateElement.success(fileid, now);
							// 回调
							onsuccess.call(fileid, json);
							localStorage.clear();
						} else {
							// 尚未完全上传完毕						
							// 改变下一部分文件的起点位置
							start += fileSplitSize;
							// 存储上传成功的文件点，以便出现意外的时候，下次可以断点续传
							localStorage.setItem(fileid, start + "");							
							// 上传下一个分割文件
							funFileSize();
							
						}		
					} else {
						objStateElement.error(fileid);
					}
				}
			};
```

前端向后台提交文件

```javascript
	var xhr_filesize = new XMLHttpRequest();
			xhr_filesize.open("GET", "/BigFileUpload/ajaxFilesUploadServlet?filename=" + nameArray.join(), true);
			xhr_filesize.onreadystatechange = function(e) {
				if (xhr_filesize.readyState == 4) {
					if (xhr_filesize.status == 200 && xhr_filesize.responseText) {
						var json = JSON.parse(xhr_filesize.responseText);
						if (json.succ && json.data) {
							for (var key in json.data) {
								if (json.data[key] > 0 && json.data[key] < fileArray[key].size) {									
									objStateElement.backgroundSize(key, json.data[key] / fileArray[key].size * 100);
									objStateElement.keep(key);
								} 
								$("filelist_" + key).filesize = json.data[key];
							}
						}
					}
				}
			};
			xhr_filesize.send();
		}
		
```

#####3.后台接收文件

```java
 /***
    * @Description: 上传流文件并保存
    * @param request
    * @param response
    * @throws ServletException
    * @throws IOException
    * @version: v1.1.0
    * @author: xiangdong.she
    * @date: Nov 9, 2017 
    *
    * Modification History:
    * Date         Author          Version            Description
    *-------------------------------------------------------------
    * Nov 9, 2017    xiangdong.she     v1.1.0               修改原因
    */
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        
        request.setCharacterEncoding("utf-8"); //设置编码
        
        JSONObject json = new JSONObject(); //返回的json串
        
        String filename = ""; //文件名称
        String path = request.getRealPath("/upload"); //获取文件需要上传到的路径
        
        try
        {
            List<FileItem> items = new ServletFileUpload(
                    new DiskFileItemFactory()).parseRequest(request);
            for (FileItem item : items)
            {
                if (item.isFormField())
                {

String fieldname = item.getFieldName();
                    String fieldvalue = "";
                    if (fieldname.equals("name"))
                    {
                        filename = fieldvalue = URLDecoder.decode(item.getString(),
                                "UTF-8");
                        
                    }
                    else
                    {
                        fieldvalue = item.getString();
                    }
                    
                    System.out.println("fieldname:" + fieldname
                            + "--fieldvalue:" + fieldvalue);
                    // to do list
                }
                else
                {
                    String fieldname = item.getFieldName();
                    InputStream filecontent = item.getInputStream();
                    System.out.println("fieldname:" + fieldname + "--filename:"
                            + filename + "---filecontent:" + filecontent
                            + "---path:" + path);
                    //手动写入硬盘
                    if (makeDir(path))
                    {
                        createFile(path, filename);
                    }
                    
                    File file = new File(path + File.separator + filename);
                    FileOutputStream fos = new FileOutputStream(file, true);
                    InputStream is = item.getInputStream();
                    IOUtils.copy(is, fos);
                    is.close();
                    fos.close();
                    
                    System.out.println("获取上传文件的总共的容量：" + item.getSize());
                }
            }
        }
        catch (FileUploadException e)
        {
            e.printStackTrace();
        }
        catch (Exception e)
        {
            e.printStackTrace();
        }
        json.put("succ", true);
        response.setContentType("text/plain");
        response.getWriter().write(json.toString());
    }
```

### 5.结果展现

![](/contentImages/image/20171109/36SPsLW0FMlsDfvfAmS.png)

![](/contentImages/image/20171109/DHIWV2yyyHa9iSCy7dp.png)

![](/contentImages/image/20171109/VigxiyvcoPR7e1090dy.png)

![](/contentImages/image/20171109/KF5dcEp7OWOUxSHcjBD.png)

![](/contentImages/image/20171109/XxYSSIoeM6YjdXNdj5H.png)

![](/contentImages/image/20171109/3nKXBIwlFyRPr5f3HyF.png)

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

无插件实现大文件分片上传，断点续传

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子