写在前面：

　　这几天，有去研究一下WebUploader上传文件，前面的博客有记录下使用WebUploader简单上传文件的例子，今天就把分片断点上传的例子也记录下吧，在博客园中，也查看了一些资料，基本上后台处理数据都是用的Servlet，或者是SpringMVC，由于最近的项目一直都是Struts2，所以这里就用Struts2中的action来对数据进行处理，达到分片上传文件的效果。

　　

　　1.什么是分片上传?

　　顾名思义，就是把文件分成一片片，即让一个文件，分割成好几个小文件，然后再上传。这样做的好处是便于上传大文件。

　　2.分片上传大致思路：

　　1.前台页面，选择文件，点击按钮进行上传。

　　2.WebUploader将上传的文件，分割成指定的个数，挨个发送到服务端后台。

　　3.服务器接收分割后的小文件，并存储到临时文件夹下

　　4.服务器接收分割后的小文件完毕后，前台页面执行上传成功函数。

　　5.在上传成功函数中，发送请求到服务器，请求合并小文件为一个整体的文件。

　　6.服务器后台对文件进行合并操作，合并完成后删除存储小文件的临时文件。

　　了解了分片上传的大致过程，下面直接上demo吧。

　　前台页面：

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <%
  3.     String scheme = request.getScheme();
  4.     String serverName = request.getServerName();
  5.     String contextPath = request.getContextPath();
  6.     int port = request.getServerPort();
  7.  
  8.     //网站的访问跟路径
  9.     String baseURL = scheme + "://" + serverName + ":" + port
  10.             + contextPath;
  11.     request.setAttribute("baseURL", baseURL);
  12. %>
  13. <html>
  14. <head>
  15.     <title>WebUploader文件分片上传简单示例</title>
  16.     <%--引入css样式--%>
  17.     <link href="${baseURL}/webuploader0.1.5/webuploader.css" rel="stylesheet" type="text/css"/>
  18.     <script src="${baseURL}/ligerui2/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
  19.     <%--引入文件上传插件--%>
  20.     <script type="text/javascript" src="${baseURL}/webuploader0.1.5/webuploader.min.js"></script>
  21.  
  22.     <script type="text/javascript">
  23.  
  24.             $(function(){
  25.                 /*
  26.                 对于uploader的创建，最好等dom元素也就是下面的div创建好之后再创建，因为里面有用到选择文件按钮，
  27.                 不然会创建报错，这是很容易忽视的地方，故这里放到$(function(){}来进行创建*/
  28.                 var uploader = WebUploader.create({
  29.  
  30.                     // swf文件路径
  31.                     swf: '${baseURL}/webuploader0.1.5/Uploader.swf',
  32.                     // 文件接收服务端地址。
  33.                     server: '${baseURL}/uploadFile2',
  34.                     // [默认值：'file']  设置文件上传域的name。
  35.                     fileVal:'upload',
  36.                     // 选择文件的按钮。可选。
  37.                     // 内部根据当前运行是创建，可能是input元素，也可能是flash.
  38.                     pick:
  39.                         {
  40.                             multiple: false,
  41.                             id: '#filePicker'
  42.                         },
  43.  
  44.                     // 上传并发数。允许同时最大上传进程数[默认值：3]   即上传文件数
  45.                     /*这个是关键  如果开启了分片上传 并不限制同时上传的数目 会导致后台接受的分片错乱  比如按正常的分片第一片应该是开头
  46.                     但接收的可能就变成第三片从而顺序错乱 这是由于百度webuploader默认允许同时最大上传进程数为3个
  47.                     所以会导致接受顺序错乱从而重组发生错误，故这里设置为1*/
  48.                     threads: 1,
  49.  
  50.                     // 自动上传修改为手动上传
  51.                     auto: false,
  52.                     //是否要分片处理大文件上传。
  53.                     chunked: true,
  54.                     // 如果要分片，分多大一片？ 默认大小为5M.
  55.                     chunkSize: 5 * 1024 * 1024,
  56.                     // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
  57.                     resize: false,
  58.                     formData: {
  59.                         guid: Math.random() //这里主要用于命名存储小文件的临时文件夹
  60.                             }
  61.                 });
  62.  
  63.                 //当有文件添加进来的时候
  64.                 uploader.on('fileQueued', function (file) {
  65.  
  66.                    //重新选择文件 进行清空
  67.                    $("#fileList").html("");
  68.  
  69.                     //具体逻辑根据项目需求来写  这里知识简单的举个例子写下
  70.                    $one = $("<div id='"+file.id+"'>"+file.name+"</div>");
  71.                    $two = $("<div id='state'>等待上传......</div>");
  72.                    $("#fileList").append($one);
  73.                    $("#fileList").append($two);
  74.  
  75.                     });
  76.  
  77.                 // 文件上传过程中创建进度条实时显示。
  78.                 uploader.on('uploadProgress', function (file, percentage) {
  79.                     // 具体逻辑...
  80.                     console.log("uploadProgress===="+percentage);
  81.                     $("#state").text("正在上传中...");
  82.  
  83.                 });
  84.  
  85.                 // 文件上传成功处理。
  86.                 uploader.on('uploadSuccess', function (file, response) {
  87.                     // 具体逻辑...
  88.                     console.log('upload success...\n');
  89.                     console.log(uploader.options.formData.guid);
  90.                     console.log(file.name);
  91.  
  92.                     //合并文件
  93.                     $.post(
  94.                         "${baseURL}/mergeFile",
  95.                         //发送到后台的参数
  96.                         {
  97.                             guid: uploader.options.formData.guid,
  98.                             chunks: Math.ceil(file.size / (5 * 1024 * 1024)),
  99.                             fileName: file.name
  100.                         },
  101.                         function(data){
  102.  
  103.                         });
  104.  
  105.                     $("#state").text("文件上传成功啦~~~");
  106.                 });
  107.  
  108.                 // 文件上传失败处理。
  109.                 uploader.on('uploadError', function (file) {
  110.                     // 具体逻辑...
  111.                 });
  112.                 // 上传传完毕，不管成功失败都会调用该事件，主要用于关闭进度条
  113.                 uploader.on('uploadComplete', function (file) {
  114.                     // 具体逻辑...
  115.                 });
  116.  
  117.                 //点击上传按钮触发事件
  118.                 $("#btnClick").click(function(){
  119.                     uploader.upload();
  120.                 });
  121.  
  122.                 //取消上传
  123.                 $("#btnCancel").click(function(){
  124.                     //逻辑处理..
  125.                 });
  126.  
  127.             });
  128.     </script>
  129.  
  130. </head>
  131. <body style="padding:10px">
  132. <div id="layout1">
  133.     <div id="uploader-demo">
  134.         <div id="fileList" ></div>
  135.         <div id="filePicker" >选择文件</div>
  136.         <button id="btnClick">开始上传</button>
  137.         <button id="btnCancel">取消上传</button>
  138.     </div>
  139. </div>
  140. </body>
  141. </html>

　　后台action:

  1. /**
  2.  * Description:com.ims.action
  3.  * Author: Eleven
  4.  * Date: 2017/12/26 10:50
  5.  */
  6. @Controller("FileAction")
  7. public class FileAction {
  8.  
  9.     /*用于接收分割请求的每个小文件的相关参数*/
  10.     //记得提供对应的get set方法
  11.     //上传文件对象(和表单type=file的name值一致)
  12.     private File upload;
  13.     //文件名
  14.     private String uploadFileName;
  15.     //上传类型
  16.     private String uploadContentType;
  17.  
  18.     /**
  19.      * 以下变量都是public，参数太多，不想设为private再去写get,set方法了，
  20.      * 就偷个懒直接用了public了
  21.      */
  22.     //文件分片序号
  23.     public String chunk;
  24.  
  25.     public String guid;//合并与分割都有用到
  26.  
  27.     //用于接收发送合并请求的相关参数
  28.     public String fileName; //文件名
  29.     public String chunks;  //分割数量
  30.  
  31. 　　//当进行分片上传文件的时候，每上传一个小文件就会调用这个方法，这个就跟普通的保存文件没啥区别的
  32.     public void uploadFile2() throws Exception{
  33.         String str = "D:/upload44/divide/";  //文件保存路径
  34.         //保存每个小文件的路径
  35.         String realPath = str + guid +"/" + chunk;
  36.         File tmp =new File(realPath);
  37.         FileUtils.copyFile(upload, tmp);
  38.         System.out.println("上传文件"+uploadFileName+",第几块："+chunk+",大小："+(upload.length()/1024/1024)+"M");
  39.  
  40.     }
  41.  
  42. 　　//文件合并
  43.     public void mergeFile() throws Exception{
  44.  
  45.         String path = "D:/upload44/merge/" ;
  46.         //创建 合并文件夹
  47.         new File(path).mkdir();
  48.  
  49.         //创建 合并后的文件
  50.         File newFile = new File(path + fileName);
  51.         if(!newFile.exists()){
  52.             newFile.createNewFile();
  53.         }
  54.  
  55.         FileOutputStream outputStream = new FileOutputStream(newFile, true);//文件追加写入
  56.  
  57.         byte[] byt = new byte[10 * 1024 * 1024];
  58.         int len;
  59.         FileInputStream temp = null;//分片文件
  60.         for (int i = 0; i < Integer.parseInt(chunks); i++) {
  61.             //"D:/upload44/divide/" + guid + "/" + i 为保存分割后的小文件的路径
  62.             temp = new FileInputStream(new File("D:/upload44/divide/" + guid + "/" + i));
  63.             while ((len = temp.read(byt)) != -1) {
  64.                 System.out.println(len);
  65.                 outputStream.write(byt, 0, len);
  66.  
  67.             }
  68.             temp.close();
  69.         }
  70.  
  71.          //当所有追加写入都写完  才可以关闭流
  72.         outputStream.close();
  73.  
  74.         //删除分片文件
  75.         String path2 = "D:/upload44/divide/" + guid;
  76.         FileUtils.deleteDirectory(new File(path2));//删除目录下所有的内容
  77.  
  78.         System.out.println("success!guid=" + guid + ";chunks=" + chunks + ";fileName=" + fileName);
  79.  
  80.     }
  81.  
  82.     public File getUpload() {
  83.         return upload;
  84.     }
  85.  
  86.     public void setUpload(File upload) {
  87.         this.upload = upload;
  88.     }
  89.  
  90.     public String getUploadFileName() {
  91.         return uploadFileName;
  92.     }
  93.  
  94.     public void setUploadFileName(String uploadFileName) {
  95.         this.uploadFileName = uploadFileName;
  96.     }
  97.  
  98.     public String getUploadContentType() {
  99.         return uploadContentType;
  100.     }
  101.  
  102.     public void setUploadContentType(String uploadContentType) {
  103.         this.uploadContentType = uploadContentType;
  104.     }
  105. }

　　struts.xml配置：

  1. <action name="uploadFile2" class="FileAction" method="uploadFile2">
  2. </action>
  3. <action name="mergeFile" class="FileAction" method="mergeFile">
  4. </action>

　　

　　好啦，到这里，一个简单的文件分片断点上传就完成了~~~~~~~~又有新任务来了，干活干活！！！

　　对了补充说明下，后台只是接收了一些简单的参数而已，而从前台WebUploader传递过来的参数当然不止上面那几个了，所以，可以学会用F12调试模式，进行查看发送的请求，以及相关的请求参数，这里就不多说了

　　运行截图：

　　

　　

WebUploader分片断点上传文件（二）的更多相关文章

  1. java实现视频断点上传文件

    一.概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载.在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了.一般断点下载时才用到Range和Content- ...

  2. iOS 断点上传文件

    项目开发中,有时候我们需要将本地的文件上传到服务器,简单的几张图片还好,但是针对iPhone里面的视频文件进行上传,为了用户体验,我们有必要实现断点上传.其实也不是真的断点,这里我们只是模仿断点机制. ...

  3. WebUploader点击上传文件选择框会延迟几秒才会显示

    accept: { title: 'Images', extensions: 'jpg,jpeg,png', mimeTypes: 'image/*' } 改为 accept: { title: 'I ...

  4. WebUploader上传文件（一）

    写在前面: 文件上传方式很多的,对于大文件的上传,在本次项目中也有涉及,主要是用了分片断点上传大文件.所以就去了解了一下WebUploader,先从简单的上传文件开始吧~ 在代码中写注释,这样看的比较 ...

  5. Thinkphp拖拽上传文件-使用webuploader插件（自己改动了一些地方）——分片上传

    html页面: <!DOCTYPE html> <html class="js cssanimations"> <head> <meta  ...

  6. webuploader 上传文件 生成链接下载文件

    最近 在asp.net MVC 项目 需要实现一个Excel和 图片上传功能.之前有使用过SWFUpload 做过上传图片功能,在本次实现过程中,有人推荐WebUploader 上传组件,因此采用we ...

  7. JQ 上传文件(单个,多个,分片)

    最原始的方式: 前端代码: <div> <span>最原始的方式</span><br /> <span>条件1:必须是 post 方式< ...

  8. 文件断点上传，html5实现前端，java实现服务器

    断点上传能够防止意外情况导致上传一半的文件下次上传时还要从头下载,网上有很多关于断点的实现,这篇文章只是从前到后完整的记录下一个可用的实例,由于生产环境要求不高,而且就是提供给一两个人用,所以我简化了 ...

  9. WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法

    由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作 ...

随机推荐

  1. tornado的非异步阻塞模式

    [优化tornado阻塞任务的三个选择] 1.优化阻塞的任务,使其执行时间更快.经常由于是一个DB的慢查询,或者复杂的上层模板导致的,这个时候首要的是加速这些任务,而不是优化复杂的webserver. ...

  2. oracle一些基本命令

    Oracle安装配置 设置四个账户及对应的密码 No. 用户名 口令 1 sys change_on_install 2 system manager 3 scott tiget 4 sh sh 上面 ...

  3. Robotium 框架学习之概述

    框架目的: Robotium is an Android test automation framework that has full support for native and hybrid a ...

  4. shell ping一个IP，延时大于5，输出延时大于5s，打印输出

    # ping一个IP,延时大于5,输出延时大于5s,打印输出 #!/bin/bash ip=$* echo $ip num=`ping  -c 10 ${ip}|grep icmp_seq|awk ' ...

  5. CentOS 7 yum 安装ownCloud 搭建云盘服务器

    基于CentOS7.0 64位系统+ownCloud 10.0 稳定版本构建 ownCloud 是一个开源免费专业的私有云存储项目,它能帮你快速在个人电脑或服务器上架设一套专属的私有云文件同步网盘,可 ...

  6. WebService的基本介绍

    一.WebService的基本介绍    1.WebService是什么? WebService ---> Web Service web的服务    2.思考问题: WebService是we ...

  7. 浏览器输入URL加载的全过程都发生了什么事情，你知道？

    什么是URL: 统一资源定位符(URL,英文 Uniform / Universal Reaource Locator 的缩写) 标准的URL由服务类型(协议).存放资源的主机域名(可以是域名或者ip ...

  8. openvpn技术实现客户端直接访问远程机器中docker内容器的实现与原理

    传统开发中如果要从开发机中访问服务器中的docker中的服务可能可能需要如下方案: 利用docker run的-p属性直接映射端口到服务器中 优点:客户端直接访问服务器就可以访问到docker容器. ...

  9. 一个PHP高性能、多并发、restful的工具库（基于multi_curl）

    This is high performance curl wrapper written in pure PHP. It's compatible with PHP 5.4+ and HHVM. N ...

  10. SVN如何commit(提交)项目代码

    在本地代码做出变更之后,我们就需要通过svn commit命令提交到远程服务端 工具/原料   SVN客户端 方法/步骤   选中需要更新的代码文件夹或目录,点击右键,选择"Tortoise ...