webuploader

背景 公司做网盘系统，一直在调用图片服务器的接口上传图片，以前写的，以为简单改一改就可以用 最初要求 php 上传多种视频格式，支持大文件，并可以封面截图，时长统计 问题 1、上传到阿里云服务器，13秒左右，连接被重置 2、切换到本地服务器后 413 Request Entity Too Large / nginx 第2个问题还好，一般设置一下php.ini 和 nginx.conf 文件中的上传文件大小限制即可，但却不是最佳选项，因为一个视频2G算是正常大小，因此修改上传限制到2048MB不太现实，即使修改了也会超时。 第1个问题，应该是阿里策略，不允许大文件上传，解决了第一个问题应该也会消失。 思考 首先不考虑整个文件直接上传的方案，于是搜索，发现有<b>分片上传</b>这个名词， 看了下原理，大概意思是将一个大文件按照一定尺寸进行切割，然后逐个发送到后台， 后台接收到所有的分片文件后，再组装成原文件。 遂深入，发现出自百度的 <a href="http://fex.baidu.com/webuploader/">webuploader</a> ，支持分片、并发、预览压缩、拖拽、MD5秒传等 看了几篇网上的使用案例以及官网的 getting-started.html， 总来来说网上的博客质量不高，有的浅尝辄止，有的代码缺失，有的只注重前端，有的将代码放到csdn，需要积分下载，

核心原理： 该项目核心就是文件分块上传。前后端要高度配合，需要双方约定好一些数据，才能完成大文件分块，我们在项目中要重点解决的以下问题。 * 如何分片； * 如何合成一个文件； * 中断了从哪个分片开始。 如何分，利用强大的js库，来减轻我们的工作，市场上已经能有关于大文件分块的轮子，虽然程序员的天性曾迫使我重新造轮子。但是因为时间的关系还有工作的关系，我只能罢休了。最后我选择了百度的WebUploader来实现前端所需。 如何合，在合之前，我们还得先解决一个问题，我们如何区分分块所属那个文件的。刚开始的时候，我是采用了前端生成了唯一uuid来做文件的标志，在每个分片请求上带上。不过后来在做秒传的时候我放弃了，采用了Md5来维护分块和文件关系。 在服务端合并文件，和记录分块的问题，在这方面其实行业已经给了很好的解决方案了。参考迅雷，你会发现，每次下载中的时候，都会有两个文件，一个文件主体，另外一个就是文件临时文件，临时文件存储着每个分块对应字节位的状态。 这些都是需要前后端密切联系才能做好，前端需要根据固定大小对文件进行分片，并且请求中要带上分片序号和大小。前端发送请求顺利到达后台后，服务器只需要按照请求数据中给的分片序号和每片分块大小（分片大小是固定且一样的）算出开始位置，与读取到的文件片段数据，写入文件即可。 为了便于开发，我 将服务端的业务逻辑进行了如下划分，分成初始化

众所皆知，web上传大文件，一直是一个痛。上传文件大小限制，页面响应时间超时.这些都是web开发所必须直面的。 本文给出的解决方案是：前端实现数据流分片长传，后面接收完毕后合并文件的思路。 实现文件夹上传，要求：服务端保留层级结构，支持10w级别的文件夹上传。 大文件上传及断点续传，要求：支持50G级的单个文件上传和续传。续传要求：在刷新浏览器后能够续传上传，在重启浏览器后能够继续上传上（关闭浏览器后重新打开），在重启电脑后能够继续上传。 支持PC端全平台，Windows,Mac,Linux 浏览器要求支持全部浏览器，包括ie6,ie7,ie8,ie9,Chrome,Firefox 下面贴出简易DEMO源码分享： 前端页面： 后端代码，此Demo是基于MVC架构的： 后端代码我进行了模块划化，而不是网上的将所有的模块放在一个类中，这样对于以后的维护和升级来说都是一个灾难。 文件块处理逻辑 文件块保存逻辑如下 web.xml 配置如下 整个项目的截图 依赖的JAR包如下 运行效果如下： 在此分享！希望多多指正~ 后端代码逻辑大部分是相同的，目前能够支持MySQL,Oracle,SQL。在使用前需要配置一下数据库，可以参考我写的这篇文章： http://blog.ncmem.com/wordpress/2019/08/07/java超大文件上传与下载/ 来源： oschina 链接：

插件使用是 webuploader，可自己网上下载 点击按钮打开一个新页面进行多图片上传，最后返回结果 这里相当打开一个新页面 传递参数，实际打开新页面根据自己项目进行修改 下面是实现图片上传所需的HTML以及js <link rel="shortcut icon" href="images/favicon.ico"> <link href="~/Scripts/webuploader/css/bootstrap.min.css" rel="stylesheet" /> <link href="~/Scripts/webuploader/css/font-awesome.min.css" rel="stylesheet" /> <link href="~/Scripts/webuploader/css/style.css" rel="stylesheet" /> <link href="~/Scripts/webuploader/css/syntax.css" rel="stylesheet" /> <link href="~/Scripts/webuploader/css/webuploader.css" rel="stylesheet" /> <link href="~/Scripts/webuploader/css/demo.css" rel="stylesheet" />

在Web应用系统开发中，文件上传和下载功能是非常常用的功能，今天来讲一下JavaWeb中的文件上传和下载功能的实现。 先说下要求： PC 端全平台支持，要求支持Windows,Mac,Linux 支持所有浏览器。 支持文件批量上传 支持文件夹上传，且要求在服务端保留层级结构。文件夹数量要求支持到10W。 支持大文件断点续传，要求刷新浏览器，重启浏览器，重启电脑后仍然能够继续上传。文件大小要求能够支持到50个G。 支持自动加载本地文件，要求能够自动加载指定的本地文件。 支持文件批量下载，要求不要在服务器打包。因为50G的文件在服务器打包时间比较长。 支持文件夹下载，要求不要在服务器打包，下载到本地后要求保留层级结构 文件列表面板支持路径导航，新建文件夹 对于文件上传，浏览器在上传的过程中是将文件以流的形式提交到服务器端的，如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦，所以一般选择采用apache的开源工具common-fileupload这个文件上传组件。这个common-fileupload上传组件的jar包可以去apache官网上面下载，也可以在struts的lib文件夹下面找到，struts上传的功能就是基于这个实现的。common-fileupload是依赖于common-io这个包的，所以还需要下载这个包。 一、开发环境搭建

核心原理： 该项目核心就是文件分块上传。前后端要高度配合，需要双方约定好一些数据，才能完成大文件分块，我们在项目中要重点解决的以下问题。 * 如何分片； * 如何合成一个文件； * 中断了从哪个分片开始。 如何分，利用强大的js库，来减轻我们的工作，市场上已经能有关于大文件分块的轮子，虽然程序员的天性曾迫使我重新造轮子。但是因为时间的关系还有工作的关系，我只能罢休了。最后我选择了百度的WebUploader来实现前端所需。 如何合，在合之前，我们还得先解决一个问题，我们如何区分分块所属那个文件的。刚开始的时候，我是采用了前端生成了唯一uuid来做文件的标志，在每个分片请求上带上。不过后来在做秒传的时候我放弃了，采用了Md5来维护分块和文件关系。 在服务端合并文件，和记录分块的问题，在这方面其实行业已经给了很好的解决方案了。参考迅雷，你会发现，每次下载中的时候，都会有两个文件，一个文件主体，另外一个就是文件临时文件，临时文件存储着每个分块对应字节位的状态。 这些都是需要前后端密切联系才能做好，前端需要根据固定大小对文件进行分片，并且请求中要带上分片序号和大小。前端发送请求顺利到达后台后，服务器只需要按照请求数据中给的分片序号和每片分块大小（分片大小是固定且一样的）算出开始位置，与读取到的文件片段数据，写入文件即可。 为了便于开发，我 将服务端的业务逻辑进行了如下划分，分成初始化

WEB版一次选择多个图片进行批量上传(WebUploader)的解决方案 参考文章： （1）WEB版一次选择多个图片进行批量上传(WebUploader)的解决方案 （2）https://www.cnblogs.com/chillsrc/p/7490539.html 备忘一下。 来源： oschina 链接： https://my.oschina.net/u/4428122/blog/4668907

文件夹数据库处理逻辑 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

一、概述 所谓断点续传，其实只是指下载，也就是要从文件已经下载的地方开始继续下载。在以前版本的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

文件夹数据库处理逻辑 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