layui+struts2上传文件

最新推荐文章于 2020-12-09 23:49:13 发布

yytoo2

最新推荐文章于 2020-12-09 23:49:13 发布

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： struts2 前端文章标签： struts2 layui 文件上传

本文链接：https://blog.youkuaiyun.com/yytoo2/article/details/81530602

这篇博客介绍了如何结合前端layui框架与后端Struts2框架，实现文件上传功能。用户通过点击layui按钮触发上传操作，后台Action进行接收和处理。

前端html部分:

<button type="button" class="layui-btn" id="uploadMutil">上传pdf</button>

前端js部分layui配置

var upId=122;
layui.use(['upload','form', 'layedit', 'laydate'], function(){
   var upload = layui.upload;
   var $ = layui.jquery;  //为了方便, 在这里引入了jquery
   var uploadInst = upload.render({
		    elem: '#uploadMutil', //绑定元素,这个是html中上传控件的id
		    url: 'xxxxxx', //上传接口url
		    exts: 'jpg|pdf',  //此处可以限制上传文件的类型, 用|分隔
		    multiple:true,
		    data:{type:'1',id:upId},  //此处是上传文件时携带的一些参数, 可以使用常数或变量, 如果使用动态值, 需要layui 2.2.6 及以上,详见官方问答NG
		    before: function(obj){
		    	layer.load(); //上传前loading
		    },
		    field:"file", //默认文件域是file,也可以自己定义,这个和后台struts中获取文件名有关
		    allDone: function(obj){  //全部提交完后回调
		   		layer.closeAll('loading'); //在完成全部提交后关闭loading
		   	 	//在所有文件提交完后可以在这里处理一些事务
		   	 
		    },
		    done: function(res){  //每个文件提交一次触发一次。
		      //上传完毕回调, 每次上传一个文件后都会执行, res是该次上传后台返回的数据
		    },