Echarts之柱状图动态加载数据篇
阿里EasyExcel导入导出Excel表格篇
点击获取源码
老规矩,先上效果:
依赖:
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
SpringMVC.xml:
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--文件大小-->
<property name="maxUploadSize" value="10240000"/>
<!--默认编码-->
<property name="defaultEncoding" value="UTF-8"/>
</bean>
web.xml:
<!--过滤器Spring编码-->
<filter>
<filter-name>characterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
前台代码:(细品前端代码)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
function filename() {
var file = $("#file").val();
var parame = encodeURI(file);
alert(parame)
$.ajax({
type: 'POST',
dataType: 'text',
url: '${pageContext.request.contextPath}/file/filename?filename=' + parame,
});
}
function downname(e) {
var id = $(e).attr("id");
var parame = encodeURI(id);
alert(id);
window.location.href = "${pageContext.request.contextPath}/file/down?downname=" + parame;
}
</script>
</head>
<body>
<h2>文件上传下载测试页面</h2>
<%--上传--%>
<form action="/file/upload" method="post" enctype="multipart/form-data">
选择文件:<input id="file" type="file" name="file" width="120px">
<input type="submit" value="上传" onclick="filename()">
</form>
<%--下载--%>
<form action="/file/down" method="GET" id="downnameform">
<c:forEach items="${file}" var="filename">
<a>${filename}</a>
<input id="${filename}" class="namelist" type="button" value="下载" onclick="downname(this)">
<p><%--换行用--%></p>
</c:forEach>
</form>
<hr>
</body>
</html>
Controller:(细品后端代码)
/**
* 跳转文件上传下载页面
*/
//获取当此上传文件名
String fileName = null;
//存储每一次上传的文件名
List<Object> allfilename = new ArrayList<>();
@RequestMapping("/file/FilePage")
public String FilePage(HttpServletRequest request){
HttpSession session = request.getSession();
session.setAttribute("file",allfilename);
return "FilePage";
}
/**
* 文件上传功能
* @param file
* @return
* @throws IOException
*/
@RequestMapping(value="/file/upload",method=RequestMethod.POST)
@ResponseBody
public String upload(MultipartFile file) throws IOException {
//得到上传文件名
fileName = file.getOriginalFilename();
//存储每一次上传的文件名
allfilename.add(fileName);
//文件上传地址
String path = "F:\\file";
//创建文件流
File dir = new File(path,fileName);
//如果父目录不存在,连同父目录一起创建。
if(!dir.exists()){
dir.mkdirs();
}
//MultipartFile自带的解析方法
file.transferTo(dir);
return "ok!";
}
/**
* 文件下载功能
* @param response
* @throws IOException
*/
@RequestMapping(method =RequestMethod.GET ,value = "/file/down")
public void down(HttpServletResponse response,String downname) throws IOException {
//文件路径
String path = "F:\\file\\"+downname;
//获取输入流
InputStream bis = new BufferedInputStream(new FileInputStream(new File(path)));
//转码,免得文件名中文乱码
path = URLEncoder.encode(path,"UTF-8");
//设置文件下载头
response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(downname,"UTF-8"));
//设置文件ContentType类型,这样设置,会自动判断下载文件类型
response.setContentType("multipart/form-data");
// 创建输出流
BufferedOutputStream out = new BufferedOutputStream(response.getOutputStream());
int len = 0;
//循环将输入流中的内容读取到缓冲区当中
while((len = bis.read()) != -1){
out.write(len);
out.flush();
}
// 关闭输出流
out.close();
}
--------------------------------------------------------------------------------------------------------------------------------
未来,小名将在公众号中与大家分享更多实用文章,期待大家的关注😁