layui上传⽂件进度条显⽰功能
页⾯
jquery下载文件请求
1.jsp⾥⾯中
<div class="layui-form-item">
<label class="layui-form-label required">特定excel</label>
<div class="layui-input-block">
<button type="button"class="layui-btn layui-btn-normal"id="chosse">选择⽂档</button>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">上传</label>
<div class="layui-input-block">
<button type="button"class="layui-btn"id="btnUpload">开始上传</button>
</div>
</div>
<!--弹出进度条-->
<div id="uploadLoadingDiv" >
<div class="layui-progress"lay-showpercent="true"lay-filter="js_upload_progress" > <div class="layui-progress-bar layui-bg-red"lay-percent="0%"></div>
</div>
</div>
2.js中
layui.use(['form','element', 'upload'], function() {
var $ = layui.jquery,
upload = layui.upload,
form=layui.form
layer = layui.layer,
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;
}diglog
return xhr;
}
}
elem: '#chosse'
,url: '${baseurl}/****/uploadFiles.html'// ⾃⼰的上传接⼝路径
,size:"2048"
,auto: false  //auto 参数必须设置为false
,bindAction: '#btnUpload'    //auto为false时，点击触发上传
,multiple: false
,field: 'file'
,accept: 'file'
,
printf函数内部结构exts:'xlsx'
,choose: function(obj){  //上传前选择回调⽅法
obj.preview(function(index, file, result){
obj.preview(function(index, file, result){
$('#title').attr('value', file.name);
});
$("#btnUpload").show();
}
,before:function(){
element.progress('js_upload_progress', '0%');//设置页⾯进度条
layer.open({
type: 1,
title: '上传进度',
closeBtn: 1, //不显⽰关闭按钮
area: ['300px', '90px'],
shadeClose: false, //开启遮罩关闭
content: $("#uploadLoadingDiv").html(),
offset: '100px'
});
}
,xhr:xhrOnProgress
,progress:function(value){//上传进度回调 value进度值
element.progress('js_upload_progress', value+'%');//设置页⾯进度条
},
//普通⽂件
done: function (res) {
layer.close(layer.index);
layer.msg(res.msg,{
icon : 1,
time:1500
},function () {
if (res.success == true){
$('#filepath').attr('value', res.obj);
$("#btnUpload").hide();
}
});
},
error: function (index, upload) {
layer.alert("上传失败，请重新上传."+index);
<(index);
return false;
}
});
});
progress进度条
3.需要引⼊的js⽂件
⾃⼰到官⽹上去下载需要的JS⽂件，下⾯这两个必须要引⼊的。
<script src="${baseurl}/layui/lib/layui/layui.js"charset="utf-8"></script>
<script src="${baseurl}/layui/js/lay-config.js?v=1.0.4"charset="utf-8"></script> java 代码
上传代码
AjaxJson ⾃⼰写的结果集。
Constants.HOMEPATH+Constants.UPLOAD_PER_FILE ⾃⼰定义的路径
@RequestMapping("/uploadFiles")
@ResponseBody
public AjaxJson uploadFiles(HttpServletRequest request){
AjaxJson json =new AjaxJson();
log.info("每⽇信息(⼀⼿)---进⼊上传.......");
try{
String tempPath = Constants.HOMEPATH+Constants.UPLOAD_PER_FILE+"/"+System.currentTimeMillis();
try{
String path = pyFileByExcel(request, tempPath);
path = place(Constants.HOMEPATH,"");
json.setMsg("上传成功");
json.setObj(path);
json.setSuccess(true);
}catch(Exception e){
json.setSuccess(false);
json.String());
e.printStackTrace();
}
}catch(Exception e){
directoryentry对象
json.String());
json.setSuccess(false);
log.info("每⽇信息(⼀⼿)------"+e.toString());
e.printStackTrace();
}
return json;
}
public static String copyFileByExcel(HttpServletRequest request, String filePath)
throws IOException {
String fileName ="";
// 将当前上下⽂初始化给 CommonsMutipartResolver （多部分解析器）
CommonsMultipartResolver multipartResolver =new CommonsMultipartResolver(
// 检查form中是否有enctype="multipart/form-data"
if(multipartResolver.isMultipart(request)){
DefaultMultipartHttpServletRequest multipartRequest =(DefaultMultipartHttpServletRequest) request;            Map<String, MultipartFile> fileMap = FileMap();
for(Map.Entry<String, MultipartFile> entity : Set()){
// 获取上传⽂件对象
MultipartFile mf = Value();
if(!mf.isEmpty()){
fileName += mf.getName()+ mf.getOriginalFilename();
fileName = place("img","");
//把图⽚名称改为cover
int index = fileName.indexOf(".");
String s1 = fileName.substring(0,index);
fileName = place(s1,"BJ"+System.currentTimeMillis());
// 拼接后台⽂件名称
// ⽂件保存全路径
String savePath = filePath +"/"+ fileName;
File savefile =new File(savePath);
// 判断⽂件保存是否存在
ParentFile()!= null ||!ParentFile().isDirectory()){
// 创建⽂件
}
try{
//返回是全部路径
return savePath;
}catch(IOException e){
throw new IOException("上传失败--"+ e.getMessage());
}
}
}
}else{
throw new IOException("上传⽂件请求头信息错误");
直线滑块图片}
return null;
}

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