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

Java导入Excel文件页面实现JS的更多相关文章

  1. Java 导入Excel文件到数据库

    原文:http://www.jb51.net/article/44021.htm 项目中要求读取excel文件内容,并将其转化为xml格式.常见读取excel文档一般使用POI和JExcelAPI这两 ...

  2. Vue项目中导入excel文件读取成js数组

    1. 安装组件 cnpm install xlsx --save 2. 代码 <template> <span> <input class="input-fil ...

  3. .Net MVC 导入导出Excel总结(三种导出Excel方法,一种导入Excel方法) 通过MVC控制器导出导入Excel文件(可用于java SSH架构)

    .Net MVC  导入导出Excel总结(三种导出Excel方法,一种导入Excel方法) [原文地址] 通过MVC控制器导出导入Excel文件(可用于java SSH架构)   public cl ...

  4. java后端导入excel模板和导入excel文件去读数据

    模板转载地址:https://www.cnblogs.com/zhangyangtao/p/9802948.html 直接上代码(我是基于ssm写的demo,导入文件目前只能读取.xls后缀的exce ...

  5. java如何导入Excel文件

    Java使用POI导入Excel文件,操作起来比较简单,支持xlsx格式. 下载POI资源包 从官网https://poi.apache.org/下载POI,笔者选择的是版本是3.17,下载后文件名是 ...

  6. Java解析导入Excel文件后台代码实现

    使用MultipartFile上传Excel文件后端代码实现:(springmvc下的spring-webmvc (MultipartFile )上传) 由于POST一个包含文件上传的Form会以mu ...

  7. Java POI导入Excel文件

    今天在公司需要做个导入Excel文件的功能,所以研究了一下,参考网上的一些资料总算是做出来了,在此记录一下防止以后忘记怎么弄. 本人用的是poi3.8,所以需要的JAR包如下: poi-3.8.jar ...

  8. springMVC(5)---导入excel文件数据到数据库

    springMVC(5)---导入excel文件数据到数据库 上一篇文章写了从数据库导出数据到excel文件,这篇文章悄悄相反,写的是导入excel文件数据到数据库.上一篇链接:springMVC(4 ...

  9. 基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能

    思路: 1.首先,页面前端,上传附件,提交给后台,并带一个随机性的参数(可以用时间戳): 2.后端接收附件,做一系列的逻辑处理,无误后,将对应的文件存储在上传的目录下: 3.然后前端,上传附件成功后, ...

随机推荐

  1. 《 javascript 设计模式与开发实践 》 ---发布-订阅模式 代码小问题

    定义公共事件: 删除事件优化:

  2. 纪录:Solr6.4.2+Flume1.7.0 +morphline+kafka集成

    当前大多数企业版hadoop的solr版本都还停留在solr4.x,由于这个版本的solr本身的bug较多,使用起来会出很多奇怪的问题.如部分更新日期字段失败的问题. 最新的solr版本不仅修复了以前 ...

  3. Shallow Heap 和 Retained Heap的区别

    http://blog.csdn.net/a740169405/article/details/53610689 Shallow Heap 和 Retained Heap的区别 https://i.c ...

  4. javascript面向对象之Javascript 继承

    转自原文javascript面向对象之Javascript 继承 在JavaScript中实现继承可以有多种方法,下面说两种常见的. 一,call 继承 先定义一个“人”类 //人类 Person=f ...

  5. net_->ForwardBackward()的大致梳理

    net_->ForwardBackward()方法在net.hpp文件中 Dtype ForwardBackward() { Dtype loss; Forward(&loss); Ba ...

  6. 过时的PreferenceActivity导致Fragment显示问题

    问题描写叙述: 在一个点击preferenceactivity中某项显示一个Fragment的场景中,出现错误: java.lang.RuntimeException: This should be ...

  7. int、bigint、smallint 和 tinyint范围

    int.bigint.smallint 和 tinyint范围使用整数数据的精确数字数据类型.bigint从 -2^63 (-9223372036854775808) 到 2^63-1 (922337 ...

  8. 64位只有一种调用约定stdcall

    procedure TForm2.Button1Click(Sender: TObject); function EnumWindowsProc(Ahwnd: hwnd; AlParam: lPara ...

  9. pom.xml出现web.xml is missing and <failOnMissingWebXml> is set to true解决方案

    提示信息应该能看懂.也就是缺少了web.xml文件,<failOnMissingWebXml>被设置成true了. 搜索了一下,Stack Overflow上的答案解决了问题,分享一下. ...

  10. 国内物联网平台初探(六) ——庆科云FogCloud

    平台定位 FogCloud 快速接入智能硬件 FogCloud为开发者提供便捷的智能硬件接入服务,真正实现敏捷开发,快速迭代. FogCloud提供功能强大的云端服务 包括 产品/APP管理 ,消息通 ...