前言:
最近在做公司的app项目,其中的一块需求是要上传视频,由于现在的电子设备等像素都比较高,所以拍摄的视频内存都比较大,如果直接上传很容易出现连接超时,在查询相关资料之后,准备在前端实现分片上传,其原理就是将大文件分割成合适大小的小文件,也就是分片,将小片传递到后台之后,保存在项目,等待所有的小片上传完毕之后再小片依次写入一个新的文件,即合并。本次使用的百度的上传插件WebUploader。官网及API:https://fex.baidu.com/webuploader/
下面将详细记录操作过程。
一、前端页面
1、首先引入需要的js和css
<!-- css-->
<link rel="stylesheet" type="text/css" href="../css/webuploader.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
这里根据自己的地址引入webuploader.css,此处的bootstrap.css是为了美化后面的进度条样式。
<!-- js-->
<script type="text/javascript" src="../js/webuploader.min.js"></script>
2、页面html
<body >
<h2>Hello,World</h2>
<div id="thelist" class="uploader-list"></div>
<div style="margin: 20px 20px 20px 0;">
<div id="picker" class="form-control-focus">选择文件</div>
</div>
<button id="btnSync" type="button" class="btn btn-warning">开始同步</button>
<!-- 进度条-->
<div class="progress">
<div id="progress" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
<!-- <span class="sr-only">60% 完成</span> -->
</div>
</div>
</body>
页面定义了一个文件选择框和提交按钮,还有一个进度条
3、js代码
var uploader = WebUploader.create({
// swf文件路径
swf : '../js/Uploader.swf',//这个好像普通的文件上