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 = $(['<tr id="upload-' + index + '">','<td>'+'<img src="'+ result +'" alt="'+ file.name +'" >'+'</td>', '<td>' + file.name + '</td>', '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>', '<td><div class="layui-progress layui-progress-big" lay-filter="progress_'+index+'" lay-showPercent="true"><div class="layui-progress-bar" lay-percent="0%"></div></div></td>', '<td>等待上传</td>', '<td>', '<button class="layui-btn layui-btn-xs demo-reload demo-hide">重传</button>', '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>', '</td>', '</tr>'].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('<span style="color: #5FB878;">上传成功</span>');//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('<span style="color: #FF5722;">上传失败</span>');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();}

前端页面

数据库

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

atitit. 文件上传带进度条 atiUP 设计 java c# php
atitit. 文件上传带进度条atiUP设计java c# php 1. 设计要求 1 2. 原理and架构 1 3. ui 2 4. spring mvc 2 5. springMVC.xml 3 ...
jquery PHP大文件上传,Jquery和BigFileUpload实现大文件上传及进度条显示
实现方法:用到了高山来客的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, ...
jquery文件上传插件|进度条
jquery文件上传插件|进度条一.Uploadify 官网:http://www.uploadify.com/ 下载地址:http://down.51cto.com/data/577863 详细参 ...
文件上传带进度条（多种风格）
文件上传带进度条多种风格非常漂亮! 友好的提示以及上传验证! 部分代码: <formid="form1"runat="server">< ...
ajax实现上传文件的进度,基于Ajax技术实现文件上传带进度条
1.概述在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运 ...
文件上传 java 进度条_Java如何实现动态显示文件上传进度条
本文实例实现文件上传的进度显示,我们先看看都有哪些问题我们要解决. 1 上传数据的处理进度跟踪 2 进度数据在用户页面的显示就这么2个问题, 第一个问题,主要是组件的选择必须支持数据处理侦听或通知 ...
Flex4/Flash多文件上传(带进度条)实例分享
要求必备知识本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上演示地址演 ...
.Net neatupload上传控件实现文件上传的进度条
1. 引入bin文件 (可以到neatupload官网下载,也可以到教育厅申报系统中找) 2. 将控件加入到工具栏,在工具栏中点鼠标右键,如图: 3. 加入neatuplaod这个文件夹(可以到nea ...
ajax异步文件上传和进度条
一.ajax异步文件上传之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...

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

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

进入主题，直接上代码，

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

最新文章

热门文章