整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
今年國慶假期終于可以憋在家里了不用出門了，不用出去看后腦了，真的是一種享受。這么好的光陰怎么浪費，睡覺、吃飯、打豆豆這怎么可能（耍多了也煩），完全不符合我們程序員的作風，趕緊起來把文章寫完。
這篇文章比較基礎，在國慶期間的業(yè)余時間寫的，這幾天又完善了下，力求把更多的前端所涉及到的關于文件上傳的各種場景和應用都涵蓋了,若有疏漏和問題還請留言斧正和補充。
以下是本文所涉及到的知識點，break or continue ?
原理很簡單，就是根據 http 協(xié)議的規(guī)范和定義，完成請求消息體的封裝和消息體的解析，然后將二進制內容保存到文件。
我們都知道如果要上傳一個文件，需要把 form 標簽的enctype設置為multipart/form-data,同時method必須為post方法。
那么multipart/form-data表示什么呢？
multipart互聯(lián)網上的混合資源，就是資源由多種元素組成，form-data表示可以使用HTML Forms 和 POST 方法上傳文件，具體的定義可以參考RFC 7578。
multipart/form-data 結構
看下 http 請求的消息體
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次請求要上傳文件，其中boundary表示分隔符，如果要上傳多個表單項，就要使用boundary分割，每個表單項由———XXX開始，以———XXX結尾。
每一個表單項又由Content-Type和Content-Disposition組成。
Content-Disposition: form-data 為固定值，表示一個表單元素，name 表示表單元素的 名稱，回車換行后面就是name的值，如果是上傳文件就是文件的二進制內容。
Content-Type：表示當前的內容的 MIME 類型，是圖片還是文本還是二進制數據。
解析
客戶端發(fā)送請求到服務器后，服務器會收到請求的消息體，然后對消息體進行解析，解析出哪是普通表單哪些是附件。
可能大家馬上能想到通過正則或者字符串處理分割出內容，不過這樣是行不通的，二進制buffer轉化為string,對字符串進行截取后，其索引和字符串是不一致的，所以結果就不會正確，除非上傳的就是字符串。
不過一般情況下不需要自行解析，目前已經有很成熟的三方庫可以使用。
至于如何解析，這個也會占用很大篇幅，后面的文章在詳細說。
使用 form 表單上傳文件
在 ie時代，如果實現一個無刷新的文件上傳那可是費老勁了，大部分都是用 iframe 來實現局部刷新或者使用 flash 插件來搞定，在那個時代 ie 就是最好用的瀏覽器（別無選擇）。
DEMO
這種方式上傳文件，不需要 js ，而且沒有兼容問題，所有瀏覽器都支持，就是體驗很差，導致頁面刷新，頁面其他數據丟失。
HTML
<form method="post" action="http://localhost:8100" enctype="multipart/form-data">
選擇文件:
<input type="file" name="f1"/> input 必須設置 name 屬性，否則數據無法發(fā)送<br/>
<br/>
標題：<input type="text" name="title"/><br/><br/><br/>
<button type="submit" id="btn-0">上 傳</button>
</form>
復制代碼服務端文件的保存基于現有的庫koa-body結合 koa2實現服務端文件的保存和數據的返回。
在項目開發(fā)中，文件上傳本身和業(yè)務無關，代碼基本上都可通用。
在這里我們使用koa-body庫來實現解析和文件的保存。
koa-body 會自動保存文件到系統(tǒng)臨時目錄下，也可以指定保存的文件路徑。
然后在后續(xù)中間件內得到已保存的文件的信息，再做二次處理。
NODE
/**
* 服務入口
*/
var http = require('http');
var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');//文件保存庫
var fs = require('fs');
var Koa = require('koa2');
var app = new Koa();
var port = process.env.PORT || '8100';
var uploadHost= `http://localhost:${port}/uploads/`;
app.use(koaBody({
formidable: {
//設置文件的默認保存目錄，不設置則保存在系統(tǒng)臨時目錄下 os
uploadDir: path.resolve(__dirname, '../static/uploads')
},
multipart: true // 開啟文件上傳，默認是關閉
}));
//開啟靜態(tài)文件訪問
app.use(koaStatic(
path.resolve(__dirname, '../static')
));
//文件二次處理，修改名稱
app.use((ctx) => {
var file = ctx.request.files.f1;//得道文件對象
var path = file.path;
var fname = file.name;//原文件名稱
var nextPath = path+fname;
if(file.size>0 && path){
//得到擴展名
var extArr = fname.split('.');
var ext = extArr[extArr.length-1];
var nextPath = path+'.'+ext;
//重命名文件
fs.renameSync(path, nextPath);
}
//以 json 形式輸出上傳文件地址
ctx.body = `{
"fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
}`;
});
/**
* http server
*/
var server = http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ...... ');
復制代碼CODE
https://github.com/Bigerfe/fe-learn-code/
JSP 可以與 HTML form 標簽一起使用，來允許用戶上傳文件到服務器。上傳的文件可以是文本文件或圖像文件或任何文檔。
我們使用 Servlet 來處理文件上傳，使用到的文件有：
upload.jsp : 文件上傳表單。
message.jsp : 上傳成功后跳轉頁面。
UploadServlet.java : 上傳處理 Servlet。
需要引入的 jar 文件：commons-fileupload-1.3.2、commons-io-2.5.jar。
結構圖如下所示：
接下來我們詳細介紹。
創(chuàng)建一個文件上傳表單
下面的 HTML 代碼創(chuàng)建了一個文件上傳表單。以下幾點需要注意：
表單 method 屬性應該設置為 POST 方法，不能使用 GET 方法。
表單 enctype 屬性應該設置為 multipart/form-data.
表單 action 屬性應該設置為在后端服務器上處理文件上傳的 Servlet 文件。下面的實例使用了 UploadServlet Servlet 來上傳文件。
上傳單個文件，您應該使用單個帶有屬性 type="file" 的 <input .../> 標簽。為了允許多個文件上傳，請包含多個 name 屬性值不同的 input 標簽。輸入標簽具有不同的名稱屬性的值。瀏覽器會為每個 input 標簽關聯(lián)一個瀏覽按鈕。
upload.jsp 文件代碼如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>文件上傳實例 - 菜鳥教程</title></head><body><h1>文件上傳實例 - 菜鳥教程</h1><form method="post" action="/TomcatTest/UploadServlet" enctype="multipart/form-data">
選擇一個文件:<input type="file" name="uploadFile" />
<br/><br/>
<input type="submit" value="上傳" /></form></body></html>
編寫后臺 Servlet
以下是 UploadServlet 的源代碼，同于處理文件上傳，在這之前我們先確保依賴包已經引入到項目的 WEB-INF/lib 目錄下：
下面的實例依賴于 FileUpload，所以一定要確保在您的 classpath 中有最新版本的 commons-fileupload.x.x.jar 文件。可以從http://commons.apache.org/proper/commons-fileupload/ 下載。
FileUpload 依賴于 Commons IO，所以一定要確保在您的 classpath 中有最新版本的 commons-io-x.x.jar 文件。可以從http://commons.apache.org/proper/commons-io/ 下載。
你可以直接下載本站提供的兩個依賴包：
commons-fileupload-1.3.2.jar
commons-io-2.5.jar
UploadServlet 的源代碼 如下所示：
package com.runoob.test;import java.io.File;import java.io.IOException;import java.io.PrintWriter;import java.util.List;
import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;import org.apache.commons.fileupload.disk.DiskFileItemFactory;import org.apache.commons.fileupload.servlet.ServletFileUpload;
/**
* Servlet implementation class UploadServlet
*/@WebServlet("/UploadServlet")public class UploadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
// 上傳文件存儲目錄
private static final String UPLOAD_DIRECTORY = "upload";
// 上傳配置
private static final int MEMORY_THRESHOLD = 1024 * 1024 * 3; // 3MB
private static final int MAX_FILE_SIZE = 1024 * 1024 * 40; // 40MB
private static final int MAX_REQUEST_SIZE = 1024 * 1024 * 50; // 50MB
/**
* 上傳數據及保存文件
*/
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// 檢測是否為多媒體上傳
if (!ServletFileUpload.isMultipartContent(request)) {
// 如果不是則停止
PrintWriter writer = response.getWriter();
writer.println("Error: 表單必須包含 enctype=multipart/form-data");
writer.flush();
return;
}
// 配置上傳參數
DiskFileItemFactory factory = new DiskFileItemFactory();
// 設置內存臨界值 - 超過后將產生臨時文件并存儲于臨時目錄中
factory.setSizeThreshold(MEMORY_THRESHOLD);
// 設置臨時存儲目錄
factory.setRepository(new File(System.getProperty("java.io.tmpdir")));
ServletFileUpload upload = new ServletFileUpload(factory);
// 設置最大文件上傳值
upload.setFileSizeMax(MAX_FILE_SIZE);
// 設置最大請求值 (包含文件和表單數據)
upload.setSizeMax(MAX_REQUEST_SIZE);
// 構造臨時路徑來存儲上傳的文件
// 這個路徑相對當前應用的目錄
String uploadPath = getServletContext().getRealPath("./") + File.separator + UPLOAD_DIRECTORY;
// 如果目錄不存在則創(chuàng)建
File uploadDir = new File(uploadPath);
if (!uploadDir.exists()) {
uploadDir.mkdir();
}
try {
// 解析請求的內容提取文件數據
@SuppressWarnings("unchecked")
List<FileItem> formItems = upload.parseRequest(request);
if (formItems != null && formItems.size() > 0) {
// 迭代表單數據
for (FileItem item : formItems) {
// 處理不在表單中的字段
if (!item.isFormField()) {
String fileName = new File(item.getName()).getName();
String filePath = uploadPath + File.separator + fileName;
File storeFile = new File(filePath);
// 在控制臺輸出文件的上傳路徑
System.out.println(filePath);
// 保存文件到硬盤
item.write(storeFile);
request.setAttribute("message",
"文件上傳成功!");
}
}
}
} catch (Exception ex) {
request.setAttribute("message",
"錯誤信息: " + ex.getMessage());
}
// 跳轉到 message.jsp
getServletContext().getRequestDispatcher("/message.jsp").forward(
request, response);
}}
message.jsp 文件代碼如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>文件上傳結果</title></head><body>
<center>
<h2>${message}</h2>
</center></body></html>
編譯和運行 Servlet
編譯上面的 Servlet UploadServlet，并在 web.xml 文件中創(chuàng)建所需的條目，如下所示：
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<servlet>
<display-name>UploadServlet</display-name>
<servlet-name>UploadServlet</servlet-name>
<servlet-class>com.runoob.test.UploadServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>UploadServlet</servlet-name>
<url-pattern>/TomcatTest/UploadServlet</url-pattern>
</servlet-mapping></web-app>
現在嘗試使用您在上面創(chuàng)建的 HTML 表單來上傳文件。當您在瀏覽器中訪問：http://localhost:8080/TomcatTest/upload.jsp ，演示如下所示：
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
一步，先寫html或jsp頁面，寫一個form，enctype設置為multipart/form-data，寫兩個input，一個type為file，一個type為submit，type的值可以用雙引號，也可不用。詳細代碼如下：<form action="uploadServlet" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="上傳">
</form>
第二步，在web.xml中設置servlet和servlet mapping，并在servlet中設置multipart-config，設置允許上傳文件的最大長度，注意單位為字節(jié)，樣例中約為10M和20M。
第三步，在servlet中處理文件上傳，使用 request.getPart("file")方法獲取part，再通過part.getSubmittedFileName獲取上傳文件名，使用part.write方法寫文件到服務中，注意路徑問題，可以直接使用絕對路徑。
對于linux中使用tomcat，可能還需要配置tomcat的servlet.xml中的UMASK="0022"，修改前為0027。
以上便是我分享的內容，感謝您的閱讀，非常歡迎并期待您在評論區(qū)留下寶貴的意見和建議。如果你在處理數據時遇到了類似的問題，歡迎隨時私信我，我將竭誠為你提供幫助。同時，如果你對數據處理領域充滿熱情，也歡迎你與我私信交流，期待與你共同探討、學習和進步，期待與您的每一次交流。
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
