提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  数据库

当前栏目

实战：第十七章：xlsx文件导入数据入库

文件 数据
2023-02-26 09:51:18 时间

直接上代码，先是页面，这里用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%">
1234567891011121314151617181920212223242526272829303132333435

导入结果：

<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">
123456789
 //导入
        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);             
12345678910111213141516

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/120583526

相关文章