1.在表单上传组件中,添加文件上传的主键按钮:
2.选用文档中的上传文件进度的回调:
我自己的代码::::
(html代码)
<div class="layui-form-item"> <label class="layui-form-label">视频上传</label> <button type="button" class="layui-btn" id="shipin_src"> <i class="layui-icon"></i>上传视频 </button> <button type="button" class="layui-btn" id="uploadBtn"> 开始上传 </button> <!--缩略预览图--> <input type="text" disabled name="src" value="" style="width:300px"> <span id="mv_m"></span> <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="progressBar"> <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div> </div> </div>
(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 () { //请求异常回调 } });
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 ;
如果出现大文件上传失败:请看下一篇文章---------解决服务器接受最大上传上限