一、異步上傳
之前的上傳方案，在上傳成功后都會(huì)跳轉(zhuǎn)頁(yè)面。而在實(shí)際開發(fā)中，很多情況下上傳后不進(jìn)行跳轉(zhuǎn)，而是進(jìn)行頁(yè)面的局部刷新，比如：上傳頭像成功后將頭像顯示在網(wǎng)頁(yè)中。這時(shí)候就需要使用異步文件上傳。
1.1 JSP頁(yè)面
編寫JSP頁(yè)面，引入jQuery和jQuery表單上傳工具jquery.form.js【該js文件已經(jīng)上傳到我的資源，有需要的小伙伴可以自行下載】
upload4.jsp?
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>上傳</title>
<script src="/js/jquery-2.1.1.min.js"></script>
<script src="/js/jquery.form.js"></script>
</head>
<body>
<h3>文件上傳</h3>
<form id="ajaxForm" enctype="multipart/form-data">
<input type="file" name="file"/>
<%-- 按鈕類型不能是submit，否則會(huì)刷新頁(yè)面 --%>
<input type="button" value="上傳頭像" id="btn"/>
<!-- 上傳頭像后展示的位置 -->
<img src="/" width="100" id="img">
<script>
$(function () {
$("#btn").click(function () {
// 異步提交表單
$("#ajaxForm").ajaxSubmit({
url: "/fileUpload4",
type: "post",
success: function (data) {
$("#img").attr("src", data);
console.log(data);
}
})
})
})
</script>
</form>
</body>
</html>1.2 控制器方法
// 接收異步上傳請(qǐng)求
@RequestMapping("/fileUpload4")
// 不進(jìn)行頁(yè)面跳轉(zhuǎn)
@ResponseBody
public String upload3(HttpServletRequest request,MultipartFile file) throws Exception{
// 1.設(shè)置上傳文件保存的文件夾，存放上傳的文件
String realPath = request.getSession().getServletContext().getRealPath("/upload");
File dir = new File(realPath);
if(!dir.exists()){
dir.mkdirs();
}
// 拿到上傳文件名
String filename = file.getOriginalFilename();
filename = UUID.randomUUID()+"_"+filename;
// 創(chuàng)建空文件
File newFile = new File(dir,filename);
// 將上傳的文件寫到空文件中
file.transferTo(newFile);
System.out.println("/upload/"+filename);
return "/upload/"+filename;
}1.3 測(cè)試結(jié)果
訪問(wèn)路徑：http://localhost:8080/upload4.jsp
OK，我們可以看得出來(lái)確實(shí)只刷新了頭像那一部分的頁(yè)面。本次案例成功實(shí)現(xiàn)?
二、跨服務(wù)器上傳
由于文件占據(jù)磁盤空間較大，在實(shí)際開發(fā)中往往會(huì)將文件上傳到其他服務(wù)器中，此時(shí)需要使用跨服務(wù)器上傳文件。
2.1 修改tomcat的部分配置
1. 解壓tomcat作為圖片服務(wù)器，在tomcat的webapps下創(chuàng)建upload目錄作為文件上傳目錄。
這是我自己的tomcat安裝目錄，新建一個(gè)upload文件夾。?
2. 修改tomcat的 conf/web.xml 文件，支持跨服上傳。
<servlet> ?
??<init-param> ???
????<param-name>readonly</param-name>
????<param-value>false</param-value>
??</init-param>
</servlet>3. 修改tomcat的 conf/server.xml 文件，修改tomcat端口，修改完開啟tomcat服務(wù)器，如下圖：
<Connector port="8081" protocol="HTTP/1.1"connectionTimeout="20000" redirectPort="8443" />?
?雙擊運(yùn)行
出現(xiàn)該頁(yè)面，不要關(guān)閉這個(gè)頁(yè)面！??！?
2.2 JSP頁(yè)面
這里的內(nèi)容和上面的JSP沒(méi)有區(qū)別！只是響應(yīng)的路徑不一樣。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>上傳</title>
<script src="/js/jquery-2.1.1.min.js"></script>
<script src="/js/jquery.form.js"></script>
</head>
<body>
<h3>文件上傳</h3>
<form id="ajaxForm" enctype="multipart/form-data">
<input type="file" name="file"/>
<%-- 按鈕類型不能是submit，否則會(huì)刷新頁(yè)面 --%>
<input type="button" value="上傳頭像" id="btn"/>
<!-- 上傳頭像后展示的位置 -->
<img src="/" width="100" id="img">
<script>
$(function () {
$("#btn").click(function () {
// 異步提交表單
$("#ajaxForm").ajaxSubmit({
url: "/fileUpload5",
type: "post",
success: function (data) {
$("#img").attr("src", data);
console.log(data);
}
})
})
})
</script>
</form>
</body>
</html>2.3 添加依賴
這里我們需要在pom.xml添加跨服上傳依賴
<!-- 跨服上傳 -->
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-core</artifactId>
<version>1.18.1</version>
</dependency>
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-client</artifactId>
<version>1.18.1</version>2.4?控制器方法
創(chuàng)建控制器方法，該方法在接受到上傳請(qǐng)求后將文件保存到其他服務(wù)器上。
// 該方法接收到上傳請(qǐng)求后將文件保存到其他服務(wù)器上
@RequestMapping("/fileUpload5")
@ResponseBody
public String upload4(HttpServletRequest request,MultipartFile file) throws Exception{
// 設(shè)置跨服上傳的服務(wù)器路徑
String path = "http://localhost:8081/upload/";
// 獲取上傳的文件名
String filename = file.getOriginalFilename();
filename = UUID.randomUUID()+"_"+filename;
// 跨服上傳：
// 1.創(chuàng)建客戶端對(duì)象
Client client = Client.create();
// 2.使用客戶端對(duì)象連接圖片服務(wù)器
WebResource resource = client.resource(path+filename);
// 3.傳輸數(shù)據(jù)
resource.put(file.getBytes());
System.out.println(path+filename);
return path+filename;
}2.5?測(cè)試結(jié)果?
訪問(wèn)路徑：http://localhost:8080/upload5.jsp
可以看得到確實(shí)成功上傳到了服務(wù)器上面的upload目錄下
三、文件下載
將文件上傳到服務(wù)器后，有時(shí)我們需要讓用戶下載上傳的文件，接下來(lái)我們編寫文件下載功能：
3.1 查詢可下載文件方法
編寫控制器方法，查詢所有可下載的文件（我這里是查詢存放在/webapps/upload/目錄下的圖片），并跳轉(zhuǎn)到下載頁(yè)面
// 查詢可下載的文件
@RequestMapping("/showFiles")
public String showFileDown(HttpServletRequest request, Model model){
// 1.獲取下載文件路徑集合。注：跨服務(wù)器上傳中，網(wǎng)絡(luò)路徑無(wú)法獲取文件列表。
String path = request.getSession().getServletContext().getRealPath("/upload");
File file = new File(path);
String [] files = file.list();
// 2.將路徑放入模型中，跳轉(zhuǎn)到JSP頁(yè)面
model.addAttribute("files",files);
return "download";
}3.2 添加JSTL依賴
<!-- 添加JSTL依賴 -->
<dependency>
<groupId>org.apache.taglibs</groupId>
<artifactId>taglibs-standard-spec</artifactId>
<version>1.2.5</version>
</dependency>
<dependency>
<groupId>org.apache.taglibs</groupId>
<artifactId>taglibs-standard-impl</artifactId>
<version>1.2.5</version>
</dependency>3.3 編寫下載頁(yè)面
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>下載</title>
</head>
<body>
<h3>文件下載</h3>
<%-- 遍歷文件集合 --%>
<c:forEach items="${files}" var="file">
<a href="/download?fileName=${file}">${file}</a><br/>
</c:forEach>
</body>
</html>3.4 下載控制器方法
// 文件下載
@RequestMapping("/download")
public void fileDown(HttpServletRequest request, HttpServletResponse response,String fileName) throws Exception{
// 設(shè)置響應(yīng)頭
response.setHeader("Content-Disposition","attachment;filename="+fileName);
// 獲取文件路徑
String path = request.getSession().getServletContext().getRealPath("/upload");
File file = new File(path,fileName);
// 獲取字節(jié)輸出流
ServletOutputStream os = response.getOutputStream();
// 使用輸出流寫出文件
os.write(FileUtils.readFileToByteArray(file));
os.flush();
os.close();
}3.5 測(cè)試結(jié)果
OK，我們先來(lái)訪問(wèn)http://localhost:8080/showFiles
查詢出所有可以下載的文件：然后點(diǎn)擊下載也是可以成功下載，文件的上傳和下載就學(xué)習(xí)到這里了。
往期專欄&文章相關(guān)導(dǎo)讀?
?????大家如果對(duì)于本期內(nèi)容有什么不了解的話也可以去看看往期的內(nèi)容，下面列出了博主往期精心制作的Maven，Mybatis等專欄系列文章，走過(guò)路過(guò)不要錯(cuò)過(guò)哎！如果對(duì)您有所幫助的話就點(diǎn)點(diǎn)贊，收藏一下啪。其中Spring專欄有些正在更，所以無(wú)法查看，但是當(dāng)博主全部更完之后就可以看啦。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-562508.html
1. Maven系列專欄文章
| Maven系列專欄 | Maven工程開發(fā) |
| Maven聚合開發(fā)【實(shí)例詳解---5555字】 |
2. Mybatis系列專欄文章
| Mybatis系列專欄 | MyBatis入門配置 |
| Mybatis入門案例【超詳細(xì)】 | |
| MyBatis配置文件 —— 相關(guān)標(biāo)簽詳解 | |
| Mybatis模糊查詢——三種定義參數(shù)方法和聚合查詢、主鍵回填 | |
| Mybatis動(dòng)態(tài)SQL查詢 --（附實(shí)戰(zhàn)案例--8888個(gè)字--88質(zhì)量分） | |
| Mybatis分頁(yè)查詢——四種傳參方式 | |
| Mybatis一級(jí)緩存和二級(jí)緩存（帶測(cè)試方法） | |
| Mybatis分解式查詢 | |
| Mybatis關(guān)聯(lián)查詢【附實(shí)戰(zhàn)案例】 | |
| MyBatis注解開發(fā)---實(shí)現(xiàn)增刪查改和動(dòng)態(tài)SQL | |
| MyBatis注解開發(fā)---實(shí)現(xiàn)自定義映射關(guān)系和關(guān)聯(lián)查詢 |
3. Spring系列專欄文章
| Spring系列專欄 | Spring IOC 入門簡(jiǎn)介【自定義容器實(shí)例】 |
| IOC使用Spring實(shí)現(xiàn)附實(shí)例詳解 | |
| Spring IOC之對(duì)象的創(chuàng)建方式、策略及銷毀時(shí)機(jī)和生命周期且獲取方式 | |
| Spring DI簡(jiǎn)介及依賴注入方式和依賴注入類型 | |
| Spring IOC相關(guān)注解運(yùn)用——上篇 | |
| Spring IOC相關(guān)注解運(yùn)用——下篇 | |
| Spring AOP簡(jiǎn)介及相關(guān)案例 | |
| 注解、原生Spring、SchemaBased三種方式實(shí)現(xiàn)AOP【附詳細(xì)案例】 | |
| Spring事務(wù)簡(jiǎn)介及相關(guān)案例 | |
| Spring 事務(wù)管理方案和事務(wù)管理器及事務(wù)控制的API | |
| Spring 事務(wù)的相關(guān)配置、傳播行為、隔離級(jí)別及注解配置聲明式事務(wù) |
4. Spring MVC系列專欄文章???
| SpringMVC系列專欄 | Spring MVC簡(jiǎn)介附入門案例 |
| Spring MVC各種參數(shù)獲取及獲取方式自定義類型轉(zhuǎn)換器和編碼過(guò)濾器 | |
| Spring MVC獲取參數(shù)和自定義參數(shù)類型轉(zhuǎn)換器及編碼過(guò)濾器 | |
| Spring MVC處理響應(yīng)附案例詳解 | |
| Spring MVC相關(guān)注解運(yùn)用 —— 上篇 | |
| Spring MVC相關(guān)注解運(yùn)用 —— 中篇文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-562508.html | |
| Spring MVC相關(guān)注解運(yùn)用 —— 下篇 | |
| Spring MVC多種情況下的文件上傳 | |
| Spring MVC異步上傳、跨服務(wù)器上傳和文件下載 | |
| Spring MVC異常處理【單個(gè)控制異常處理器、全局異常處理器、自定義異常處理器】 | |
| Spring MVC攔截器和跨域請(qǐng)求 | |
| SSM整合案例【C站講解最詳細(xì)流程的案例】 |
到了這里，關(guān)于Spring MVC異步上傳、跨服務(wù)器上傳和文件下載的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[Python http.server] 搭建http服務(wù)器用于下載/上傳文件](https://imgs.yssmx.com/Uploads/2024/02/504673-1.png)
