layui的上传视频文件添加进度条
1.在表单上传组件中，添加文件上传的主键按钮：
2.选用文档中的上传文件进度的回调：
我自己的代码：：：：
（html代码）
（js代码）
//上传视频
upload.render({
elem: '#shipin_src' //绑定元素
, url: '/admin/upload/ShiPinUpload' //上传接口
,accept: 'video'
,auto:false
,bindAction:'#uploadBtn'
, progress: function(value) {
console.log("进度：" + value + '%');
element.progress('progressBar',value + '%');
},
choose: function(obj) {
obj.preview(function(index, file, result) {
$('input[name="src"]').html(file.name);
// $('input[name="src"]').val(file.data['src']);
});
}
, done: function (res) {
if (res.code>0) {
//上传完毕回调
layer.msg(res.msg,{icon:2});
return false;
}else {
//上传完毕回调
$('#mv_m').html(res.data['sizem']+'M');
$('input[name="src"]').val(res.data['src']);
layer.msg("上传成功！",{icon:1});
}
}
, error: function () {
//请求异常回调
}
});
差点忘记 一段添加在js之前的代码：（一定要添加，这个是检测的上传进度）
//创建监听函数
var xhrOnProgress = function (fun) {
xhrOnProgress.onprogress = fun; //绑定监听
//使用闭包实现监听绑
return function () {
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
3.PHP后台接收代码：
/**
* 视频文件上传
*
*
* */
public function ShiPinUpload()
{
$file = request()->file('file'); //接收文件
//判断文件是否为空
if($file == null){
exit(json_encode(['code'=>1,'msg'=>'没有视频上传！']));
}
//获取上传图片大小
$fileImgSize = $file->getInfo('size');
$SizeM = $fileImgSize/1048576;
//保存文件地址
$info = $file->move('../public/mv_file');
//替换文件的路径，输出路径地址
$img = str_replace('\\','/','/mv_file'.'/'.$info->getSaveName());
exit(json_encode(['code'=>0,'data'=>['src'=>$img,'title'=>$info->getSaveName(),'sizem'=>$SizeM]]));
}
}
非常简单!!!!!!
切记文件上传功能，一定要在php.ini中定义最大上传文件Size ；
如果出现大文件上传失败：请看下一篇文章---------