承接上一篇（文件上传下载的实现SSM）：https://blog.csdn.net/Tianc666/article/details/104581182
其实，我认为前端上传部分，没啥说的。咱们来说道说道下载的前端怎么实现。（效果图和后端实现在 ↑ 的链接里）
上代码：
<%@ 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="上传" οnclick="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="下载" οnclick="downname(this)">
<p><%--换行用--%></p>
</c:forEach>
</form>
<hr>
</body>
</html>
上传：
选择文件上传的时候（注意：enctype="multipart/form-data"） 选择的文件用input显示，然后submit这个表单就好了。
其中 filename() 这个方法的作用是向 后端 发送上传的文件名。
<form action="/file/upload" method="post" enctype="multipart/form-data">
选择文件:<input id="file" type="file" name="file" width="120px">
<input type="submit" value="上传" οnclick="filename()">
</form>下载：
其中 <c:forEach> </c:forEach> 标签是循环显示后台传过来的，刚刚上传时发送到后台的文件名。
<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="下载" οnclick="downname(this)">
<p><%--换行用--%></p>
</c:forEach>
</form>由于文件名是循环出来的，所以，我们要想个法子，拿到每次循环出来的结果，显示在页面上，于是，我想到在downname()这个函数里面传一个 this ，这样，在 downname() 函数里面就可以获取到，当前循环结果（文件名）了。其中 encodeURI() 函数 是为了把文件名中的中文进行 URI 编码
function downname(e) {
var id = $(e).attr("id");
var parame = encodeURI(id);
alert(id);
window.location.href = "${pageContext.request.contextPath}/file/down?downname=" + parame;
}