tp5+layui实现上传大文件介绍

<div class="layui-form-item">
 <label class="layui-form-label">视频上传</label>
 <div class="layui-input-block layui-upload-video-btn">
 <ul>
 <li class="img-upload">
 <label></label>
 <input type="file" class="video-upload-file layui-upload-video-file-btn" name="file"/>
 <video width="320" height="240" controls style="display: none">
 <source src="" type="video/mp4">
 <source src="" type="video/ogg">
 您的浏览器不支持Video标签。
 </video>
 <span style="display: none">X</span>
 <input type="hidden" class="video-link-id" name="video_link_id" value="">
 </li>
 <li>//视频上传会比较久(上传完会有提示)</li>
 </ul>
 </div>
</div>

$('.video-upload-file').on('change',function(){
 layer.msg('正在提交视频......');
 //隐藏按钮，显示进度条
 $('.layui-upload-video').hide();
 $('.layui-progress-ads').show();
 var loads_video = layer.load(2,{shade: [0.2, '#3a3535']}); //产生加载圈，禁止用户其他操作
 var thisFile = $(this);
 var reader=new FileReader();
 var file_size = this.files[0].size; //文件大小
 var limit = 8388608; //每次读取文件的大小
 // var limit = 1048000; //每次读取文件的大小
 var up_count = Math.ceil(file_size/limit); //总上传次数
 var type = this.files[0].type.substr(this.files[0].type.indexOf('/')+1); //文件类型
 var success_num = 0; //用于存放上传成功的数据的id
 var check = 1; //防止多次合并
 console.log('文件大小：'+this.files[0].size);
 console.log('文件类型：'+type);
 console.log('分割上传次数：'+up_count);
 //分段读取文件
 readFile(this.files[0], 0, limit);
 function readFile(file, num, limit){
 // console.log('第'+num+'次:'+num*limit);
 reader.readAsDataURL(file.slice(num*limit, (num+1)*limit));
 reader.onload = function(e){
 console.log(reader.result.length);
 console.log(reader.result);
 //异步base的数据传输到服务器
 ajax_way(reader.result, name, num+1, thisFile);
 if((num+1)*limit <= file_size){
 readFile(file, num+1, limit);
 }
 }
 }
 function ajax_way(data,name,num, thisFile){
 //避免一次性生成太多的请求
 if(num+1 > 60){
 // console.log('等待两秒');
 sleep(6000);
 // console.log('等待结束');
 }
 $.ajax({
 url: "<?= url('admin/video/up_mfile');?>",
 type: "POST",
 data: {video:data,name:name,num:num},
 // async:false, //是否采用同步，串行发送请求
 success: function (data) {
 if(data.code == 1){
 //上传成功，成功次数加一
 success_num++;
 console.log(num+'完成');
 console.log('已完成：'+success_num+'/'+up_count);
 //计算完成的百分比
 var precentage = Math.ceil((success_num/up_count)*100);
 //更改进度条显示
 $('.layui-progress-ads-btn').attr('lay-percent', precentage+'%');
 $('.layui-progress-ads-btn').css('width', precentage+'%');
 $('.layui-progress-text').html(precentage+'%');
 //如果分割文件都上传了则调用接口合并文件
 if(success_num == up_count && check == 1){
 check = 0;
 success_num = 0;
 merge_mfile(name, up_count, thisFile, type);
 }
 }
 },
 error:function(e){
 console.log('出错了:'+num);
 //传输出错则重新上传
 ajax_way(data, name, num, thisFile);
 }
 });
 }

 //合并文件
 function merge_mfile(name, count, thisFile, type){
 $.ajax({
 url:"<?= url('admin/video/merge_mfile');?>",
 data:{name:name, count:count, type:type},
 type:"POST",
 success:function(data){
 if (data.code==1){
 layer.close(loads_video);
 layer.msg('视频提交成功');
 thisFile.siblings('.video-link-id').val(data.data);
 }else{
 layer.msg('视频提交异常请重新提交');
 //显示按钮，隐藏进度条
 $('.layui-upload-video').show();
 $('.layui-progress-ads').hide();
 //将进度条置零
 $('.layui-progress-ads-btn').attr('lay-percent', '0%');
 $('.layui-progress-ads-btn').css('width', '0%');
 $('.layui-progress-text').html('0%');
 //清空已选中的文件
 var file = $(".layui-upload-video-file-btn");
 file.after(file.clone().val(""));
 file.remove();
 }
 }
 })
 }
 function sleep(n) { //n表示的毫秒数
 var start = new Date().getTime();
 while (true) if (new Date().getTime() - start > n) break;
 }
 return false;
 });