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 : ''
});
//上传
$("#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的更多相关文章
- Java 导入Excel文件到数据库
原文:http://www.jb51.net/article/44021.htm 项目中要求读取excel文件内容,并将其转化为xml格式.常见读取excel文档一般使用POI和JExcelAPI这两 ...
- Vue项目中导入excel文件读取成js数组
1. 安装组件 cnpm install xlsx --save 2. 代码 <template> <span> <input class="input-fil ...
- .Net MVC 导入导出Excel总结(三种导出Excel方法,一种导入Excel方法) 通过MVC控制器导出导入Excel文件(可用于java SSH架构)
.Net MVC 导入导出Excel总结(三种导出Excel方法,一种导入Excel方法) [原文地址] 通过MVC控制器导出导入Excel文件(可用于java SSH架构) public cl ...
- java后端导入excel模板和导入excel文件去读数据
模板转载地址:https://www.cnblogs.com/zhangyangtao/p/9802948.html 直接上代码(我是基于ssm写的demo,导入文件目前只能读取.xls后缀的exce ...
- java如何导入Excel文件
Java使用POI导入Excel文件,操作起来比较简单,支持xlsx格式. 下载POI资源包 从官网https://poi.apache.org/下载POI,笔者选择的是版本是3.17,下载后文件名是 ...
- Java解析导入Excel文件后台代码实现
使用MultipartFile上传Excel文件后端代码实现:(springmvc下的spring-webmvc (MultipartFile )上传) 由于POST一个包含文件上传的Form会以mu ...
- Java POI导入Excel文件
今天在公司需要做个导入Excel文件的功能,所以研究了一下,参考网上的一些资料总算是做出来了,在此记录一下防止以后忘记怎么弄. 本人用的是poi3.8,所以需要的JAR包如下: poi-3.8.jar ...
- springMVC(5)---导入excel文件数据到数据库
springMVC(5)---导入excel文件数据到数据库 上一篇文章写了从数据库导出数据到excel文件,这篇文章悄悄相反,写的是导入excel文件数据到数据库.上一篇链接:springMVC(4 ...
- 基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
思路: 1.首先,页面前端,上传附件,提交给后台,并带一个随机性的参数(可以用时间戳): 2.后端接收附件,做一系列的逻辑处理,无误后,将对应的文件存储在上传的目录下: 3.然后前端,上传附件成功后, ...
随机推荐
- 《 javascript 设计模式与开发实践 》 ---发布-订阅模式 代码小问题
定义公共事件: 删除事件优化:
- 纪录:Solr6.4.2+Flume1.7.0 +morphline+kafka集成
当前大多数企业版hadoop的solr版本都还停留在solr4.x,由于这个版本的solr本身的bug较多,使用起来会出很多奇怪的问题.如部分更新日期字段失败的问题. 最新的solr版本不仅修复了以前 ...
- Shallow Heap 和 Retained Heap的区别
http://blog.csdn.net/a740169405/article/details/53610689 Shallow Heap 和 Retained Heap的区别 https://i.c ...
- javascript面向对象之Javascript 继承
转自原文javascript面向对象之Javascript 继承 在JavaScript中实现继承可以有多种方法,下面说两种常见的. 一,call 继承 先定义一个“人”类 //人类 Person=f ...
- net_->ForwardBackward()的大致梳理
net_->ForwardBackward()方法在net.hpp文件中 Dtype ForwardBackward() { Dtype loss; Forward(&loss); Ba ...
- 过时的PreferenceActivity导致Fragment显示问题
问题描写叙述: 在一个点击preferenceactivity中某项显示一个Fragment的场景中,出现错误: java.lang.RuntimeException: This should be ...
- int、bigint、smallint 和 tinyint范围
int.bigint.smallint 和 tinyint范围使用整数数据的精确数字数据类型.bigint从 -2^63 (-9223372036854775808) 到 2^63-1 (922337 ...
- 64位只有一种调用约定stdcall
procedure TForm2.Button1Click(Sender: TObject); function EnumWindowsProc(Ahwnd: hwnd; AlParam: lPara ...
- pom.xml出现web.xml is missing and <failOnMissingWebXml> is set to true解决方案
提示信息应该能看懂.也就是缺少了web.xml文件,<failOnMissingWebXml>被设置成true了. 搜索了一下,Stack Overflow上的答案解决了问题,分享一下. ...
- 国内物联网平台初探(六) ——庆科云FogCloud
平台定位 FogCloud 快速接入智能硬件 FogCloud为开发者提供便捷的智能硬件接入服务,真正实现敏捷开发,快速迭代. FogCloud提供功能强大的云端服务 包括 产品/APP管理 ,消息通 ...