thinkphp+layui⽂件上传显⽰进度条后端代码：
public function file(){
$fileKey = array_keys(request()->file());
// 获取表单上传⽂件例如上传了001.jpg
$file = request()->file($fileKey['0']);
// 移动到框架应⽤根⽬录/public/uploads/ ⽬录下
$info = $file->validate(['ext' => 'zip,rar,pdf,swf,ppt,psd,ttf,txt,xls,doc,docx,mp4'])->move('uploads/files');
数据分析的类型适合初学者做的网页if($info){
$result['code'] = 0;
$result['info'] = '⽂件上传成功!';jquery下载文件进度条
$path=str_replace('\\','/',$info->getSaveName());
$result['url'] = '/uploads/files/'. $path;
$result['ext'] = $info->getExtension();
$result['size'] = byte_format($info->getSize(),2);
return $result;
}else{
// 上传失败获取错误信息
$result['code'] =1;
$result['info'] = '⽂件上传失败!';
$result['url'] = '';
return $result;
}abap webservice接口开发
}
修改modules/upload.js，打开⽂件，搜索ajax，新增xhr：
i.ajax({
url: l.url,
type: "post",
data: r,
contentType: !1,
processData: !1,
dataType: "json",
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
xhr: l.xhr(function(e){  //此处为新添加功能
var percent = Math.floor((e.loaded / e.total)*100);//计算百分⽐
l.progress(percent);  //回调将数值返回
}),
wrap with
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
headers: l.headers || {},
success: function(i) {
t++,
d(e, i),
u()
},
error: function() {
n++,
o.msg("请求上传接⼝出现异常"),
m(e),
u()
}
})
//以上加号包裹的代码即为新增代码
html页⾯以及js，提前引⼊layui：
<!-- html -->
<div class="layui-form-item">
<label class="layui-form-label">视频</label>
<div class="layui-input-block">
<input type="text" name="vi_url" id="vi_url">
<div class="layui-upload">
<a class="layui-btn" id="btn-video">上传视频</a> <span class="x-red" id="ups"></span></div>
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo" ><div class="layui-progress-bar      </div>
</div>
//js代码
layui.use(['form','layer','laydate','upload','element'], function() {
$ = layui.jquery;
var form = layui.form,
layer = layui.layer,
laydate = layui.laydate,
upload = layui.upload,
element = layui.element;
//element.init();
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  //创建监听函数
var xhrOnProgress = function(fun) {
//使⽤闭包实现监听绑
return function() {
//通过$.ajaxSettings.xhr()；获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if (progress !== 'function')
return xhr;
//如果有监听函数并且xhr对象⽀持绑定时就把监听函数绑定上去
if (progress && xhr.upload) {
progress = progress;
}
return xhr;
}
}
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  //上传视频
elem: '#btn-video',
url: "{:url('Video/videoAdd')}",
data: {isAjax:'1',html:'yes'}, //额外参数
accept: 'video', //视频
size: 51200,  //允许⼤⼩，最⼤50M
auto: true, // ⾃动上传
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++    xhr: xhrOnProgress,
progress:function(value){  //上传进度回调 value进度值
$('.layui-progress').show();
element.progress('demo', value + '%')  //设置页⾯进度条
},
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++    done: function(res){
车security亮了是什么if(res.status == 1){
$("#vi_url").val(res.info);
}else{
layer.msg(res.info,{icon:5});
return false;
}
},error: function(request){
//console.log(request);
layer.msg('上传失败，请重新上传',{icon:5});
}
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。