webuploader

一、概述 所谓断点续传，其实只是指下载，也就是要从文件已经下载的地方开始继续下载。在以前版本的HTTP协议是不支持断点的，HTTP/1.1开始就支持了。一般断点下载时才用到Range和Content-Range实体头。HTTP协议本身不支持断点上传，需要自己实现。 二、Range 用于请求头中，指定第一个字节的位置和最后一个字节的位置，一般格式： Range:用于客户端到服务端的请求，可以通过改字段指定下载文件的某一段大小及其单位，字节偏移从0开始。典型格式： Ranges: (unit=first byte pos)-[last byte pos] Ranges: bytes=4000- 下载从第4000字节开始到文件结束部分 Ranges: bytes=0~N 下载第0-N字节范围的内容 Ranges: bytes=M-N 下载第M－N字节范围的内容 Ranges: bytes=-N 下载最后N字节内容 1.以下几点需要注意： (1)这个数据区间是个闭合区间，起始值是0，所以“Range: bytes=0-1”这样一个请求实际上是在请求开头的2个字节。 (2)“Range: bytes=-200”，它不是表示请求文件开始位置的201个字节，而是表示要请求文件结尾处的200个字节。 (3)如果last byte pos小于first byte pos

目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7. 秒传及断点续传 7.1 对于前端来说 7.2 前端做分片检验：checkChunkUploadedByResponse 8. 源码及后记 8.1 关于第一个分片丢失问题 2019/8/6更新 1. 前言 之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现 分片上传 、 秒传 以及 断点续传 的功能，听起来头都大了。 很久之前我写了一篇webuploader的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了， 经过多天调研及踩雷，最终决定基于 vue-simple-uploader 插件实现该功能，在项目中使用起来无痛且稳定。 如果你只是想实现基本的（非定制化的）上传功能，直接使用 vue-simple-uploader ，多读一下它的文档，不需要更多的二次封装。 如果你只是想实现全局上传插件，也可以参照一下我的实现。 如果你用到了分片上传、秒传及断点续传这些复杂的功能，恭喜你，这篇文章的重点就在于此。 本文源码在此： https://github.com

目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7. 秒传及断点续传 7.1 对于前端来说 7.2 前端做分片检验：checkChunkUploadedByResponse 8. 源码及后记 8.1 关于第一个分片丢失问题 2019/8/6更新 1. 前言 之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现 分片上传 、 秒传 以及 断点续传 的功能，听起来头都大了。 很久之前我写了一篇webuploader的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了， 经过多天调研及踩雷，最终决定基于 vue-simple-uploader 插件实现该功能，在项目中使用起来无痛且稳定。 如果你只是想实现基本的（非定制化的）上传功能，直接使用 vue-simple-uploader ，多读一下它的文档，不需要更多的二次封装。 如果你只是想实现全局上传插件，也可以参照一下我的实现。 如果你用到了分片上传、秒传及断点续传这些复杂的功能，恭喜你，这篇文章的重点就在于此。 本文源码在此： https://github.com

一、 功能性需求与非功能性需求 要求操作便利，一次选择多个文件和文件夹进行上传； 支持PC端全平台操作系统，Windows,Linux,Mac 支持文件和文件夹的批量下载，断点续传。刷新页面后继续传输。关闭浏览器后保留进度信息。 支持文件夹批量上传下载，服务器端保留文件夹层级结构，服务器端文件夹层级结构与本地相同。 支持大文件批量上传（20G）和下载，同时需要保证上传期间用户电脑不出现卡死等体验； 支持文件夹上传，文件夹中的文件数量达到1万个以上，且包含层级结构。 支持断点续传，关闭浏览器或刷新浏览器后仍然能够保留进度。 支持文件夹结构管理，支持新建文件夹，支持文件夹目录导航 交互友好，能够及时反馈上传的进度； 服务端的安全性，不因上传文件功能导致JVM内存溢出影响其他功能使用； 最大限度利用网络上行带宽，提高上传速度； 二、 设计分析 对于大文件的处理，无论是用户端还是服务端，如果一次性进行读取发送、接收都是不可取，很容易导致内存问题。所以对于大文件上传，采用切块分段上传 从上传的效率来看，利用多线程并发上传能够达到最大效率。 三、解决方案： 文件上传页面的前端可以选择使用一些比较好用的上传组件，例如百度的开源组件WebUploader，泽优软件的up6，这些组件基本能满足文件上传的一些日常所需功能，如异步上传文件，文件夹，拖拽式上传，黏贴上传，上传进度监控，文件缩略图

javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求，也可以使用 ajax向后端发请求 1. 通过form表单向后端发送请求 <form id="postForm" action="${pageContext.request.contextPath}/UploadServlet" method="post" enctype="multipart/form-data"> <div class="bbxx wrap"> <input type="text" id="side-profile-name" name="username" class="form-control"> <input type="file" id="example-file-input" name="avatar"> <button type="submit" class="btn btn-effect-ripple btn-primary">Save</button> </div> </form> 改进后的代码不需要form标签，直接由控件来实现。开发人员只需要关注业务逻辑即可。JS中已经帮我们封闭好了 通过监控工具可以看到控件提交的数据，非常的清晰，调试也非常的简单。 2. 通过ajax向后端发送请求 1. $.ajax({ url : "${pageContext

------------------------------------------------- 题库管理 22 . 图片库：创建文件目录，维护图片，供题库选择调用 23 . 单选题：维护单选试题，试题题目，选项，答案，类型，级别，状态，解析 24 . 多选题：维护多选试题，试题题目，选项，答案，类型，级别，状态，解析 25 . 判断题：维护判断试题，试题题目，答案，类型，级别，状态，解析 26 . 填空题：维护填空试题，试题题目，答案，类型，级别，状态，解析 27 . 问答题：维护问答试题，试题题目，答案，类型，级别，状态，解析 28 . 复合题：维护复合试题，富文本编辑器，试题题目，答案，类型，级别，状态，解析 ------------------------------------------------- 试卷 管理 29 . 组建试卷：创建试卷，题目、类型、总分、及格分数、时长、出成绩方式、重复考试、公布答案、考试对象等 试卷题型：试卷明细，给试卷添加题型，分值，随机或者手动从题库选择试题，预览试题，自动合计试卷总分 30 . 试卷列表：维护试卷，预览试卷，操作发放试卷 ------------------------------------------------- 考试 管理 31 . 正在考试：查看正在考试的试卷信息，预览试卷内容，查看考生成绩，结束考试操作 32

目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7. 秒传及断点续传 7.1 对于前端来说 7.2 前端做分片检验：checkChunkUploadedByResponse 8. 源码及后记 8.1 关于第一个分片丢失问题 2019/8/6更新 1. 前言 之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现 分片上传 、 秒传 以及 断点续传 的功能，听起来头都大了。 很久之前我写了一篇webuploader的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了， 经过多天调研及踩雷，最终决定基于 vue-simple-uploader 插件实现该功能，在项目中使用起来无痛且稳定。 如果你只是想实现基本的（非定制化的）上传功能，直接使用 vue-simple-uploader ，多读一下它的文档，不需要更多的二次封装。 如果你只是想实现全局上传插件，也可以参照一下我的实现。 如果你用到了分片上传、秒传及断点续传这些复杂的功能，恭喜你，这篇文章的重点就在于此。 本文源码在此： https://github.com

目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7. 秒传及断点续传 7.1 对于前端来说 7.2 前端做分片检验：checkChunkUploadedByResponse 8. 源码及后记 8.1 关于第一个分片丢失问题 2019/8/6更新 1. 前言 之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现 分片上传 、 秒传 以及 断点续传 的功能，听起来头都大了。 很久之前我写了一篇webuploader的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了， 经过多天调研及踩雷，最终决定基于 vue-simple-uploader 插件实现该功能，在项目中使用起来无痛且稳定。 如果你只是想实现基本的（非定制化的）上传功能，直接使用 vue-simple-uploader ，多读一下它的文档，不需要更多的二次封装。 如果你只是想实现全局上传插件，也可以参照一下我的实现。 如果你用到了分片上传、秒传及断点续传这些复杂的功能，恭喜你，这篇文章的重点就在于此。 本文源码在此： https://github.com

文件夹数据库处理逻辑 public class DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject(); this.root.put("f_id", ""); this.root.put("f_nameLoc", "根目录"); this.root.put("f_pid", ""); this.root.put("f_pidRoot", ""); } /** * 将JSONArray转换成map * @param folders * @return */ public Map<String, JSONObject> toDic(JSONArray folders) { Map<String, JSONObject> dt = new HashMap<String, JSONObject>(); for(int i = 0 , l = folders.size();i<l;++i) { JSONObject o = folders.getJSONObject(i); String id = o.getString("f_id"); dt.put(id, o); } return dt; } public Map<String, JSONObject> foldersToDic

1、介绍enctype enctype 属性规定发送到服务器之前应该如何对表单数据进行编码。 enctype作用是告知服务器请求正文的MIME类型（请求消息头content-type的作用一样） 1、1 enctype的取值有三种 值 描述 application/x-www-form-urlencoded 在发送前编码所有字符（默认） multipart/form-data 不对字符编码。每一个表单项分割为一个部件 text/plain 空格转换为 “+” 加号，但不对特殊字符编码。 1. 当enctype=’application/x-www-form-urlencoded’ 2.当enctype=’multipart/form-data’ 通过观察发现这个的请求体就发生了变化。这种请求体被称之为多部件请求体。 什么是多部件请求体：就是把每一个表单项分割为一个部件。 以请求头的content-type的boundary后面的一串随机字符串作为分割标识 普通表单项： //name的意思是文本框里面name的属性值，而admin是我们输入的文本值 Content-Disposition: form-data; name="username" admin 文件表单项 //filename的意思是：我们上传的文件名称，content-Type的意思是：MIME类型