第一步:将js文件引入页面

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ocupload-1.1.2.js"></script>

第二步:在页面中提供任意一个元素

第三步:调用插件提供的upload方法,动态修改HTML页面元素

1 <script type="text/javascript">
2 $(function(){
3 //页面加载完成后,调用插件的upload方法,动态修改了HTML页面元素
4 $("#myButton").upload({
5 action:'xxx.action',
6 name:'myFile'
7 });
8 });
9 </script>

第四步:服务费利用同名文件接收

POI需要在项目中引入依赖

<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi</artifactId>
<version>3.11</version>
</dependency>
 1 //使用POI解析
2 HSSFWorkbook workbook = new HSSFWorkbook(new FileInputStream(regionFile));
3 HSSFSheet sheet = workbook.getSheetAt(0);
4 List<Region> regionList = new ArrayList<Region>();
5 for(Row row : sheet) {
6 int rowNum = row.getRowNum();
7 if(rowNum == 0) {
8 continue;
9 }
10 String id = row.getCell(0).getStringCellValue();
11 String province = row.getCell(1).getStringCellValue();
12 String city = row.getCell(2).getStringCellValue();
13 String district = row.getCell(3).getStringCellValue();
14 String postcode = row.getCell(4).getStringCellValue();
15 //包装成区域对象
16 Region region = new Region();
17 region.setId(id);
18 region.setProvince(province);
19 region.setCity(city);
20 region.setDistrict(district);
21 region.setPostcode(postcode);
22
23 province = province.substring(0, province.length()-1);
24 city = city.substring(0, city.length()-1);
25 district = district.substring(0, district.length()-1);
26 String info = province + city + district;
27 //利用pinyin获得首字母简码
28 String[] headByString = PinYin4jUtils.getHeadByString(info);
29 String shortcode = StringUtils.join(headByString);
30 //城市编码
31 String citycode = PinYin4jUtils.hanziToPinyin(city, "");
32 region.setCitycode(citycode);
33 region.setShortcode(shortcode);
34
35 regionList.add(region);

POI生成Excel文件并下载

 1 //分区数据导出
2 public String exportXls() throws IOException {
3 //查询所有数据
4 List<Subarea> subareaList = subareaService.findAll();
5 //利用POI写到Excel中
6 HSSFWorkbook hssfWorkbook = new HSSFWorkbook();
7 //创建标签页
8 HSSFSheet sheet = hssfWorkbook.createSheet("分区数据");
9 //创建行
10 HSSFRow headRow = sheet.createRow(0);
11 headRow.createCell(0).setCellValue("分区编号");
12 headRow.createCell(1).setCellValue("开始编号");
13 headRow.createCell(2).setCellValue("结束编号");
14 headRow.createCell(3).setCellValue("位置信息");
15 headRow.createCell(4).setCellValue("省市区");
16
17 for(Subarea subarea : subareaList) {
18 HSSFRow dataRow = sheet.createRow(sheet.getLastRowNum() + 1);
19 dataRow.createCell(0).setCellValue(subarea.getId());
20 dataRow.createCell(1).setCellValue(subarea.getStartnum());
21 dataRow.createCell(2).setCellValue(subarea.getEndnum());
22 dataRow.createCell(3).setCellValue(subarea.getPosition());
23 dataRow.createCell(4).setCellValue(subarea.getRegion().getName());
24 }
25 //提供下载
26 String filename = "分区数据.xls";
27
28 String contentType = ServletActionContext.getServletContext().getMimeType(filename);
29 ServletOutputStream outputStream = ServletActionContext.getResponse().getOutputStream();
30 hssfWorkbook.write(outputStream);
31 //获取客户端浏览器类型
32 String agent = ServletActionContext.getRequest().getHeader("User-Agent");
33 filename = FileUtils.encodeDownloadFilename(filename, agent);
34 //设置响应头
35 ServletActionContext.getResponse().setHeader("content-disposition", "attachment;filename="+filename);
36 //ServletActionContext.getResponse().setContentType("application/vnd.ms-excel");
37 ServletActionContext.getResponse().setContentType(contentType);
38 return NONE;
39 }

Jquery的一键上传组件OCUpload及POI解析Excel文件的更多相关文章

  1. 文件一键上传、汉字转拼音、excel文件上传下载功能模块的实现

    ----------------------------------------------------------------------------------------------[版权申明: ...

  2. Jquery学习---一键上传

    一键上传 jar包下载 jquery代码 $(function () { $(".uploadfile").upload({ action: 'CourseXMLFileUploa ...

  3. jQuery.uploadify-----文件上传带进度条,支持多文件上传的插件

    借鉴别人总结的uploadify:基于jquery的文件上传插件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,控制文件上传大小,删除已上传文件. uploadify有两个版本,一个用f ...

  4. 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除(逻辑删除) 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据

    1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...

  5. HTML中简单实现文件的一键上传的操作

    在html中实现文件上传的方式为form表单中使用input type="file"控件,但是这个控件往往显示不是美观,影响页面效果,这时候,一般就通过一键上传的操作,来实现点击一 ...

  6. ASP.NET Core WEB API 使用element-ui文件上传组件el-upload执行手动文件文件,并在文件上传后清空文件

    前言: 从开始学习Vue到使用element-ui-admin已经有将近快两年的时间了,在之前的开发中使用element-ui上传组件el-upload都是直接使用文件选取后立即选择上传,今天刚好做了 ...

  7. jQuery OCUpload ——> 一键上传插件

    OCUpload为jQuery的插件(One Click Upload),意思为一键上传,封装了对于文件上传的一些方法,只需几行代码,文件上传优雅而简洁.      对于传统的文件上传,只是通过inp ...

  8. jquery ocupload一键上传文件应用

    直接上栗子 这是官方文档栗子 var myUpload = $(element).upload({ name: 'file', action: '', enctype: 'multipart/form ...

  9. 使用ocupload和POI一键上传Excel并解析导入数据库

    使用的工具如下:  JQuery ocupload jquery.ocupload-1.1.2.js Apache POI poi-3.9.jar 如果是Maven项目添加依赖如下: <depe ...

随机推荐

  1. ZEQP仓储管理系统( WMS)开源

    ZEQP仓储管理系统 代码框架是用的前后台分离的方式 后台使用的是Asp.Net Core平台,开发所有业务,向前台提供Rest API接口. 使用的认证方式是JWT 前端有两个项目,一个是Web端, ...

  2. 一个简单的Android音乐播放器

    Android小白的期末作业 Android期末项目,仅用作学习使用,在线音乐部分只获取了网易云热歌榜,API来自鼻子亲了脸 传送门: GitHub 参考: anddiencn 实现功能 展示出本地的 ...

  3. 洛谷 P4343 [SHOI2015]自动刷题机

    思路 二分答案 显然的二分答案,但是因为二分判定条件 \(\text{wa}\) 了好几遍-- 可以发现,\(n\) 越大,\(k\) 就越小,所以答案是有单调性的,因此可以用两个二分,一次求最大值, ...

  4. Python的UI库

    https://github.com/realitix/vulkan https://github.com/swistakm/pyimgui https://wxpython.org

  5. codeforces 1262D Optimal Subsequences 主席树询问第k小

    题意 给定长度为\(n\)的序列\(a\),以及m个询问\(<k,pos>\),每次询问满足下列条件的子序列中第\(pos\)位的值为多少. 子序列长度为\(k\) 序列和是所有长度为\( ...

  6. 干货:用好这13款VSCode插件,工作效率提升10倍

    文章每周持续更新,原创不易,「三连」让更多人看到是对我最大的肯定.可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) 大家好我是lemon, 马上进入我们今天的主题吧. 又 ...

  7. 跟着兄弟连系统学习Linux-【day07】

    day07-20200604 p25.vim常用操作 vim需要经常练习,一般用于修改配置文件.

  8. XmlAnalyzer1.00 源码

    此工程用途:将xml同级属性/子节点按字母序排列重新输出. 源码下载: https://files.cnblogs.com/files/heyang78/XmlAnalyzer-20200526-1. ...

  9. 《Java从入门到失业》第四章:类和对象(4.1):初识类和对象

    4类和对象 在第一章曾经简单介绍过,在面向对象的世界里,一切事物皆对象,当解决一个问题的时候,我们先会考虑这个问题会涉及到哪些事物,然后把事物抽象成类,当时还画了一张图如下: 从本章开始,我们一点一点 ...

  10. 论文阅读:Multi-task Learning for Multi-modal Emotion Recognition and Sentiment Analysis

    论文标题:Multi-task Learning for Multi-modal Emotion Recognition and Sentiment Analysis 论文链接:http://arxi ...