使⽤layui上传⽂件时显⽰进度条⼀、效果如下
⼆、引⼊layui
可到layui官⽹下载 www.layui/
www.layui/
三、页⾯代码
四、后台代码
后台代码没有写逻辑，⾃⾏编写 （@RequestMapping 改为⾃⼰的即可 ，注意和前端请求保持⼀致）
五、代码（直接copy即可）
引⼊代码
前端
<link rel="stylesheet"href="${tPath}/views/static/layui-v2.6.8/layui/css/layui.css">
<script src="${tPath}/views/static/layui-v2.6.8/layui/layui.js"></script>
html代码
<div class="form-group">
<label for="imgBtn"class="col-sm-2 control-label">上传头像</label>
<div class="col-sm-10">
<button type="button"class="layui-btn layui-btn-radius layui-btn-normal"id="imgBtn">
<i class="layui-icon"></i>上传头像
</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<div class="layui-progress"lay-showPercent="yes">
<div class="layui-progress-bar"id="uploadImg"lay-percent="0%"></div>
</div>
</div>
</div>
js代码
var element = layui.element, form = layui.form, layer = layui.layer, table = layui.table, laydate = layui.laydate, util = layui.util, tree = , upload = layui .upload;
layui.use('upload',function(){
var upload = layui.upload;
//执⾏实例
var uploadInst = der({
elem:'#imgBtn'//绑定元素
, url:'${tPath}/setting/user/fileUpload/'//上传接⼝
,done:function(res){
//上传完毕回调
layer.alert("上传成功",{icon:1, offset:'t'});
}
,error:function(){
//请求异常回调
layui下载
}
,progress:function(n){
var percent = n +'%'//获取进度百分⽐
$("#uploadImg").attr("lay-percent", percent);
}
});
});
后台
@RequestMapping("fileUpload")
@ResponseBody
public ResultVo fileUpload(MultipartFile file){
ResultVo resultVo =new ResultVo();
resultVo.setOk(true);
return resultVo;
}

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