前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >web开发excel文件上传及解析(上)

web开发excel文件上传及解析(上)

作者头像
全栈程序员站长
发布于 2021-12-23 04:30:10
发布于 2021-12-23 04:30:10
1.1K00
代码可运行
举报
运行总次数:0
代码可运行

前言

在web开发的时候,我们经常有遇到文件的上传以及解析的需求,比如我们将excel文件上传并且解析,最后将解析的excel的内容插入到数据库中,今天就实践一下文件的上传以及excel的解析,这篇博客主要是实践文件上传功能,对应的excel文件的解析,将在下一篇博客实践。

准备工作:

本文上传文件使用了apche下面的commons-fileupload.jar、commons-io.jar

如果是maven项目,则需要在pom.xml配置如下依赖

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<dependency>
	<groupId>commons-fileupload</groupId>
	<artifactId>commons-fileupload</artifactId>
	<version>${commons.fileupload.version}</version>
</dependency>

<dependency>
	<groupId>commons-io</groupId>
	<artifactId>commons-io</artifactId>
	<version>2.2</version>
</dependency>

如果不是maven项目则下载jar包的,然后导入到项目中,下载地址如下:

链接:https://pan.baidu.com/s/12FHorV5ImIn4aiCqFcBUkg 密码:yxgj

功能实现:

用上述两个jar包实现上传的功能比较简单,这里就直接上传代码

前端代码:主要就是一个表单

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<form name="frm_test" action="${pageContext.request.contextPath }/uploadExcelFile" method="post" enctype="multipart/form-data">
		用户名:<input type="text" name="userName">  <br/>
		文件:   <input type="file" name="file">   <br/>
        <input name="upload" type="submit" value="上传">
</form>

注意事项,一定要将enctype=”multipart/form-data”,另外就是<input type=”file” name=”file”>

其他没什么注意的地方,记得接口不要写错了

后台代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@RequestMapping(value="/uploadExcelFile",method=RequestMethod.POST,produces = "text/html;charset=UTF-8")
	@ResponseBody
	public String uploadExcelFile(@RequestParam("file") CommonsMultipartFile file,HttpServletRequest request) {
		try {
			String path = request.getSession().getServletContext().getRealPath("/");
			String fileName = "display.xlsx";
			File excelFile = new File(path+fileName);
			LOGGER.info("uploadExcelFile file = "+excelFile.toString());
			if(excelFile.exists()) {
				excelFile.delete();
			}
			file.transferTo(excelFile);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			return "fail";
		}
		return "success";
	}

这里有个小的地方需要注意@RequestParam(“file”)这个里面的file和前端的 <input type=”file” name=”file”>中的name=“file”要一致。

这部分代码是简单的功能实现,并不是特别符合springmvc的设计,因为良好的mvc的设计controller层是不能写太多的逻辑,业务逻辑应当写道model层去的。另外返回的话也只是简单的返回success和fail。除了上面的代码,还需要在配置文件applicationContext.xml中配置一个关键的bean,不然上传的时候会报错。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"
        p:maxUploadSize="5242880"
        p:maxInMemorySize="4096"
        p:defaultEncoding="UTF-8">

    </bean>

这里有个注意的地方就是bean的id必须设置为“multipartResolver”,不然同样会报错的。

好了,按照上面的操作,基本上是可以实现文件上传的功能,下面看运行的效果吧

前端展示:

我这边是上传到了tomcat中对应的该项目中,上传之后的该项目的根目录

这里仅仅是实战了一把文件上传的功能,接下来看看如何实现excel的文件解析,excel文件解析

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021年8月2日 p,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
28、购物车结算页面-导航栏与地址选择布局
(1)老规矩,复制一份我们已经写好的test.vue页面初始化我们购物车页面cart.vue
Ewall
2018/09/30
2.1K0
28、购物车结算页面-导航栏与地址选择布局
微信小程序之购物车的交互场景
        JavaScript是小程序编程中的基础语言,JavaScript代码大约占整个小程序项目一半的代码量。全局文件app.js和所有的页面js文件都是由JavaScript来编写的,JavaScript代码主要实现业务逻辑处理和用户交互两方面的作用。
淼学派对
2022/11/20
8220
微信小程序之购物车的交互场景
Vue(9)购物车练习
需求:使用vue写一个表单页面,页面上有购买的数量,点击按钮+或者-,可以增加或减少购物车的数量,数量最少不得少于0,点击移除按钮,会移除该商品,当把所有的商品移除后,页面上的表单消失,然后出现文字:购物车为空,表单下方是商品的总价格,随着商品的数量增加而增加,默认是0元,总体效果如下:
全栈程序员站长
2022/09/16
6250
Vue(9)购物车练习
20、分类详情页之数据渲染
然后复制一系列就是我们左侧栏的各个标题了,记住这里的每个标题的id要和首页各个分类名的id相对应。
Ewall
2018/09/04
1K0
20、分类详情页之数据渲染
31、地址新增 — 定义数据结构与获取方式
(1)让我们进入addressEdit.vue页面填写一条地址,ok,现在假设你已经填写完毕。 (2)这个时候我们点击保存按钮且应该为这个按钮添加一个save事件,通过官方文档可知,我们可以通过这个事件获取填写表单的内容。
Ewall
2018/09/30
9060
31、地址新增 — 定义数据结构与获取方式
27、有赞Vant组件库的引入及轮播图片预览的实现②
这个vant组件与其它组件的引入方式不同,不需要在main.js中引入,直接在页面中引入即可:
Ewall
2018/09/30
2.7K0
27、有赞Vant组件库的引入及轮播图片预览的实现②
购物车原理以及实现
可以看到,购物车这样一个功能模块,在各种购物类APP或者web应用中绝对是必不可少的东西.不论在大学中的课程设计,还是在实际的项目开发中,绝对非常重要且有些复杂的内容. 在实际操作中,身边有很多的小伙伴遇到编写购物车的代码的时候,有时候真的是一脸懵逼,总是搞不明白设计的思路,这就是本文写作的原因. 所以,本文适合搞不清楚购物车实现原理,知道原理但是实际编码不知道如何下手的小伙伴,我将给出一个思路以及实际的代码供大家参考. 在本文中,我将会用尽可能简单的句子,表达出我想表达的意思.废话不多说,开始我们的购物车实战!
roobtyan
2019/02/21
6.4K0
购物车原理以及实现
40、个人中心页面
前言:本章把个人中心页面写完,基本上这个项目的前端页面制作方面的工作大体就完成了,其它不足的我们在前后端交互的时候继续完善。 GitHub:https://github.com/Ewall1106/
Ewall
2018/12/06
2.1K0
黑马瑞吉外卖之购物车功能开发(添加购物车和购物车数据展示)
我们点击到这个按钮的时候,那么就会绑定到这个方法。这个方法会将数据给这个窗体中的数据项赋值。这个diaglogFlavor其实就是定义初始化在vue的data里面。其实是可以看作一个列表。
兰舟千帆
2022/12/02
1.1K0
实战 | 微信小程序之购物车功能
作者 | 林鑫 链接 | http://imweb.io/topic/59128ea36936ba9165f5bed8 前言 以往的购物车,基本都是通过大量的 DOM 操作来实现。微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能。 需求 先来弄清楚购物车的需求。 单选、全选和取消,而且会随着选中的商品计算出总价 单个商品购买数量的增加和减少 删除商品。当购物车为空时,页面会变为空购物车的布局 根据设计图,我们可以先实现静态页面。接下来,再看看一个购物车需要什么样的数
用户1097444
2022/06/29
1.9K0
实战 | 微信小程序之购物车功能
购物车的原理以及实现
  今天模拟京东的购物车实现原理完成了购物车模块的开发, 给大家分享下。 京东的购物车实现原理:在用户登录和不登录的状态下对购物车存入cookie还是持久化到redis中的实现。下面就来具体说次购物车的实现过程 两种情况: 用户登录,购物车存入redis中 用户未登录,购物车存入cookie中 比较两种方式的优缺点:  cookie:优点:数据保存在用户浏览器中,不占用服务端内存;用户体检效果好;代码实现简单      缺点:cookie的存储空间只有4k;更换设备时,购物车信息不能同步;cookie禁用,
用户2146856
2018/05/18
2.4K0
用Vue写加入购物车小功能
上述代码中,我们创建了一个简单的商品页面组件,该组件显示商品的名称、描述和价格,并有一个 “加入购物车” 的按钮。当按钮被点击时,addToCart 方法会被调用,该方法通过 Vuex store 触发了名为 ‘m_cart/addToCart’ 的 mutation,将商品添加到购物车中。
用户10781437
2023/10/10
3060
Android仿淘宝购物车,玩转电商购物车
前言 其实做一个电商购物车,还真不是一个轻松的活。但是只要掌握思路,一步一步来做,就会发现也就这样。废物不多说,直接上效果图 完整代码,github链接,希望能给个星,谢谢 效果图 GIF1.gif
用户2032165
2018/06/05
2.9K0
前端购物车&订单结算模块详解
首先, 我们需要在vant中找到对应的组件, 这里是ActionSheet组件。 通过对ActionSheet组件的修改, 从而得到我们需要的内容。
用户11097514
2024/05/31
6740
前端购物车&订单结算模块详解
19、分类详情页之基本页面结构
具体关于路由的跳转就不多讲了,具体可以参考前面第5章vue-router之什么是编程式路由
Ewall
2018/09/04
6440
19、分类详情页之基本页面结构
用js+cookie实现商城的购物车功能
<input name="buy" type="image" alt="第一个商品" src="images/buy.gif" align="middle" onclick="getInfo();" style="float:left;" /> <h1>商品1</h1><br/> <input type="image" alt="第二个商品" src="images/buy.gif" align="middle" onclick='common.intoCart(88,"test",60,50,1);' style="float:left;" /> <h1>商品2</h1>
用户3055976
2018/09/12
3.7K0
用js+cookie实现商城的购物车功能
购物车中变与不变的数据处理
结算的时候,选中状态时本地修改,不会远程同步,一般在第一次获取数据后,处理数据,统一设置为未选中,每次选中或者不选中,直接更改本地数据后调用setState。
挥刀北上
2021/02/03
8000
购物车中变与不变的数据处理
京东购物车分页方案探索和落地
--导读-- 本文主要结合京东购物车的特性,从技术和业务层面综合考量,探索商品附属信息分页加载方案,为逐步扩容的购物车诉求做好底层技术支撑。通过本文,读者可以充分了解到主数据分页加载和附属信息分页加载分别适用哪些业务场景。在实际开发过程中,结合应用特性选择合适的分页技术方案,保证应用低碳高效运行。
京东技术
2023/01/05
1.2K0
京东购物车分页方案探索和落地
25、商品详情页
(1)复制一份test.vue文件并重命名为goodsDetail作为我们的商品详情页面
Ewall
2018/09/04
2.2K0
25、商品详情页
干货 | 京东购物车的Java架构实现及原理!
4)用户登陆了用户名密码,添加商品, 关闭浏览器 外地老家打开浏览器  登陆用户名和密码
美的让人心动
2018/05/30
2.8K1
推荐阅读
相关推荐
28、购物车结算页面-导航栏与地址选择布局
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验