SpringMVC +layui 实现多文件上传，附加进度条

首先在进行文件上传操作的时候，你得对layui 中文件上传的一些参数先了解一下，不要网上复制粘贴，起码你要对layui 文件上传的必备参数做一些大致掌握，也是自己学习。

（1）

首先你得引入layui 必备文件，

（2）在你的html 文件中引入 layui.js, layui.css样式即可，layui是一个ui框架，对一些组件的封装，拿来即可使用，

（3）

进入主题，直接上代码，

file.html

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>高级应用：制作一个多文件列表</legend>
</fieldset><div class="layui-upload"><button type="button" class="layui-btn layui-btn-normal" id="fileList">选择多文件</button><div class="layui-upload-list"><table class="layui-table"><thead><tr><th>图片</th><th>文件名</th><th>大小</th><th>上传进度</th><th>状态</th><th>操作</th></tr></thead><tbody id="demoList"></tbody></table></div><button type="button" class="layui-btn" id="fileListAction">开始上传</button>
</div>

file.js

这里需要注意一下，在文件上传附加的进度条的实现需要替换layui里面的upload.js文件 原有的layui 没有结合这部分功能，这里的upload.js 是别人修改好的，必须替换，不然进度条加载不出来

链接：https://pan.baidu.com/s/1Z8j_9aUlSBFlfFbXjHefkg
提取码：6aub

layui.use(['table','form','layer','jquery','upload','element'],function (){let table=layui.table;let form=layui.form;let layer=layui.layer;let $=layui.$;let element=layui.element;let upload=layui.upload;//上传//多文件列表示例//创建监听函数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;}}var files;//多文件列表示例var demoListView = $('#demoList'), uploadListIns = upload.render({elem: '#fileList', size: 102400 //限制文件大小，单位 KB, exts: 'zip|rar|7z|doc|docx|pdf|txt|xls|ppt|xlsx|pptx|img|jpg|png|gif|bmp|jpeg' //只允许上传压缩文件, url: '/file/many/upload', type:'post', data:{}, dataType:'json', accept: 'file', multiple: true, auto : false   //关闭文件自动上传, bindAction: '#fileListAction', xhr: xhrOnProgress, progress: function (value) {//上传进度回调 value进度值element.progress('demoList', value + '%')//设置页面进度条}, xhr: function (index, e) {var percent = e.loaded / e.total;//计算百分比percent = parseFloat(percent.toFixed(2));element.progress('progress_' + index + '', percent * 100 + '%');console.log("-----" + percent);}// , data: JSON.stringify(Param), choose: function (obj) {var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列//读取本地文件obj.preview(function (index, file, result) {var tr = $(['+ index + '">',''+'+ result +'" alt="'+ file.name +'" >'+'', '' + file.name + '', '' + (file.size / 1014).toFixed(1) + 'kb', '+index+'" lay-showPercent="true">', '等待上传', '', '重传', '删除', '', ''].join(''));//单个重传tr.find('.demo-hide').on('click', function () {obj.upload(index, file);});//删除tr.find('.demo-delete').on('click', function () {delete files[index]; //删除对应的文件tr.remove();uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选});demoListView.append(tr);});} ,done: function (res, index, upload) {debugger//上传成功var tr = demoListView.find('tr#upload-' + index), tds = tr.children();tds.eq(4).html('上传成功');//tds.eq(4).html(''); //清空操作//刷新表格// table.reload('itemFileList', {//     url: url//     , where: {} //设定异步数据接口的额外参数//     //,height: 300// });return delete this.files[index]; //删除文件队列已经上传成功的文件this.error(index, upload);},error: function (index, upload) {debuggervar tr = demoListView.find('tr#upload-' + index), tds = tr.children();tds.eq(4).html('上传失败');tds.eq(5).find('.demo-reload').removeClass('demo-hide'); //显示重传}});
})

后台代码
controller

@Controller
@RequestMapping("/file")
public class TestController {@Resourceprivate TestService testService;@GetMapping("/file1")public String getFilePage1(){return "admin/file/file1";}@GetMapping("/file2")public String getFilePage2(){return "admin/file/file2";}@RequestMapping(value = "/many/upload",method = RequestMethod.POST )@ResponseBodypublic WnDataResult manyFileUpload(HttpServletRequest request) {//得到文件的列表List<MultipartFile> files = ((MultipartHttpServletRequest)            request).getFiles("file");String filePath = "D:\\ideaproject\\wnblogserver\\hystrix-server\\src\\main\\resources\\static\\admin\\images\\editor";//这里的地址文件上传到的地方for (int i = 0; i < files.size(); i++) {MultipartFile file = files.get(i);if (file.isEmpty()) {return WnDataResult.build(500,"上传第" + (i++) + "个文件失败");}String fileName=new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + "_" +file.getOriginalFilename();File dest = new File(filePath ,fileName);try {file.transferTo(dest);testService.manyFileUpload("\\"+"admin"+"\\"+"images"+"\\"+"editor"+"\\"+fileName);} catch (IOException e) {return WnDataResult.build(500,"上传第" + (i++) + "个文件失败");}}return WnDataResult.myok();}

前端页面


数据库

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！