webuploader 获取文件md5_使用webuploader组件实现大文件分片上传，断点续传

无组件断点续传.gif

1. 组件简介

webuploader：是一个以HTML5为主， Flash为辅的文件上传组件，采用大文件分片/并发上传的方式，极大地提高了文件上传的效率，同时兼容多种浏览器版本；

2. 项目背景简介

本篇文章的背景，是在上一篇文章(《无组件实现大文件分片上传，断点续传》)的项目背景下进行的一次尝试，所以本篇文章还是基于上一篇文章的背景，但是不会介绍视频基本信息(视频标题、简介、播出时间等)的操作，主要介绍文件的上传。因为项目的特殊需求，这种使用插进的方式最终没有被采用，因为一些控件无法做到定制化。

上一篇文章(《无组件实现大文件分片上传，断点续传》)中介绍的文件上传方式，在前端主要采用纯JavaScript来进行文件切分、验证，后台主要采用了NIO的方式进行分片的追加。而在这篇文章中，将介绍前端采用webuploader，后台采用临时目录+传统I/O方式进行分片合并的方式。

3. 技术实现

3.1 组件引入

在webuploader官网下载必要的文件，放入项目中。在页面中进行引入；

0_组件引入.png

3.2 前端页面实现

在前端页面中，可以不用关心css样式，但需要注意标签的id/nama属性，这些将在后面的JavaScript中使用到。

1-页面实现.png

可以一次上传多个大文件

style="float: left; margin-right: 10px">

选择文件

class="webuploader-element-invisible" multiple="multiple">

style="float: left; margin-right: 10px">开始上传

style="float: left; margin-right: 10px" status="suspend">暂停上传

3.3 使用组件实现文件的上传、切分、发送

在这部分，将使用组件完成文件上传、MD5验证、删除、切片、上传进度条显示、暂停、继续上传及上传成功/失败时候的回调。

无组件断点续传.gif

$(function () {

$list = $('#fileList');

var flie_count = 0;

var uploader = WebUploader.create({

//设置选完文件后是否自动上传

auto: false,

//swf文件路径

swf: 'static/webuploader/Uploader.swf',

// 文件接收服务端。

server: 'micro/BigFileUp',

// 选择文件的按钮。可选。

// 内部根据当前运行是创建，可能是input元素，也可能是flash.

pick: '#picker',

chunked: true, //开启分块上传

chunkSize: 10 * 1024 * 1024,

chunkRetry: 3,//网络问题上传失败后重试次数

threads: 1, //上传并发数

//fileNumLimit :1,

fileSizeLimit: 2000 * 1024 * 1024,//最大2GB

fileSingleSizeLimit: 2000 * 1024 * 1024,

resize: false//不压缩

//选择文件类型

//accept: {

// title: 'Video',

// extensions: 'mp4,avi',

// mimeTypes: 'video/*'

//}

});

// 当有文件被添加进队列的时候

uploader.on('fileQueued'