实战:第十七章:xlsx文件导入数据入库
直接上代码,先是页面,这里用jsp页面,导入的页面,后面的js发送请求通过后台controller跳转到这个页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" class="html_bg">
<head>
<title>客户管理导入</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="<%=path%>/resource/css/layui-list.css" media="all">
<link rel="stylesheet" href="<%=path%>/external/layui/css/layui.css" media="all">
<link rel="stylesheet" href="<%=path%>/resource/css/layui-dreamweb.css">
<link rel="stylesheet" href="<%=path%>/resource/css/layui-list-${portal_skin}.css" media="all">
<link rel="stylesheet" href="<%=path%>/external/menu-font/iconfont.css">
<link rel="stylesheet" href="<%=path%>/resource/css/layui-card.css" media="all">
<link rel="stylesheet" href="<%=path%>/resource/css/layui-card-blue.css" media="all">
<script type="text/javascript" src="<%=path%>/external/jquery-1.12.4.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=path%>/external/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=path%>/external/layui/layui.all.js?v=v1.016.000.20200529_snapshot"></script>
<script type="text/javascript" src="<%=path%>/resource/js/file-code-choose.js"></script>
<script type="text/javascript" src="<%=path%>/resource/js/public.js?v=${version}" charset="utf-8"></script>
<script type="text/javascript" src="<%=path%>/resource/js/xform.js?v=v1.016.000.20200529_snapshot"></script>
</head>
<body style="height: 80%">
<div class="new_window" style="width: 80%; margin: 20px auto;">
<form enctype="multipart/form-data" id="batchUpload">
<input type="file" name="file" style="border: 1px solid #969696" id="file">
</form>
<br>
<div style="font-size:14px;height: 250px;overflow: auto;border:1px solid #999999;padding:3px 5px; width: 80%">
导入结果:
<br>
<div style="font-size:14px;" id="result">还没有导入文件!</div>
</div>
<br>
<button class="datagrid-op layui-btn layui-btn-primary ds-btn2 " type="button" onclick="uploadBtn()" title="导入" id="daochu">导入</button>
<button class="datagrid-op layui-btn layui-btn-primary ds-btn2 " type="button" onclick="colseAll()" title="导入" id="guanbi">关闭</button>
</div>
</body>
<script type="text/javascript">
//导入
function uploadBtn() {
debugger;
var file = $("#file").val();
if(file == ''){
alert("请选择excel,再上传");
}else if(file.lastIndexOf(".xls")<0){
alert("只能上传Excel文件");
}else {
$("#result").html("正在导入请稍候...") ;
//获取form 表单内容
var form = document.getElementById("batchUpload");
//获取form表单中第一个 input type是file的的对象
var filename=$('input[type=file]')[0].files[0];
var fm = new FormData(form);
fm.append('file', filename);
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/120583526