Java导入Excel文件页面实现JS

Excel导入：

页面创建导入按钮，如：

代码：

<button class="layui-btn layui-btn-small layui-btn-primary ajax-all fun_UPLOAD_" id="upload" onclick="upload()">
    <i class="iconfont icon-daoru"></i>导入交易
</button>

JS：

function upload(){
    layer.open({
    	type : 2, //层类型
		title :'导入文件', //标题
		shadeClose : true,	//是否点击遮罩关闭
		shade : [ 0.4, '#000' ],  //遮罩
		maxmin : false,   //开启最大化最小化按钮
		area : [ '460px', '350px' ],	//设置宽高
		offset : '5px',	//坐标，默认：垂直水平居中
		moveout : true,	//是否允许拖拽到窗口外
                content : "" //iframe的url //内容这里是路径
    })
}

可以将上传文件放入form表单中，上传文件框用input框的file类型，如：

<input type="file" name="excelFile" id="file" lay-type="file" class="layui-upload-file" onchange="upfile.value=this.value">

点击确定时submit提交表单，js如下所示：

function submit(){
	//提交前校验
	if(!checkDate()){
		return;
	}
	//定义并开启上传时读取效果
	var msgIndex = layer.load(1, {
		shade: [0.4,'#def'], //0.4透明度的白色背景
		icon :　'&#xe63d'
	});
	//上传
	$("#addMore").ajaxSubmit({
		type : "post",
		url : Const.apiUrl + "", //上传路径
		dataType : "json",
		success : function(resp){
			layer.close(msgIndex);//关闭效果
			if(resp.code == 200){
				layer.open({
					area: ['40%', '60%'],
					title: '导入文件',
					content: '成功导入信息'+resp.data+'条',
					 btn : ['确定'],
						yes : function(index, layero) {
							 layer.closeAll();
						 }
				});
			}else{
				layer.msg("导入失败！");
			}
		},
		error : function(code) {
			layer.close(msgIndex);
			layer.msg("服务器错误,导入失败！");
		}
	});
}
function checkDate(){
	//获取上传的文件路径
	var fileName = $("#file").val();
	//获取上传的文件名
	var fName = fileName.substring(fileName.lastIndexOf("\\")+1,fileName.lastIndexOf("."));
	//获取上传的文件后缀
	var fType = fileName.substr(fileName.lastIndexOf("."));
	//判断有没有文件
	if(fName == ""){
		layer.msg("请选择需要导入的.xls或者.xlsx文件！");
		return false;
	}
	//判断文件格式是否正确
	if(!fType || fType.toLowerCase()!=".xls" && fType.toLowerCase()!=".xlsx"){
		layer.msg("请选择.xls或者.xlsx格式的文件导入！");
		return false；
	}
	return true;
}

以上为前端页面代码，后端代码可参考：

　　https://www.cnblogs.com/Big-Boss/p/10007807.html　　https://blog.csdn.net/u011278387/article/details/50839034

　　https://blog.csdn.net/u012012240/article/details/53929141

　　https://www.cnblogs.com/GoForMyDream/p/5912737.html