天天看點

JavaScript大檔案上傳解決方案

前言:因自己負責的項目(jetty内嵌啟動的SpringMvc)中需要實作檔案上傳,而自己對java檔案上傳這一塊未接觸過,且對 Http 協定較模糊,故這次采用漸進的方式來學習檔案上傳的原理與實踐。該部落格重在實踐。

一. Http協定原理簡介 

    HTTP是一個屬于應用層的面向對象的協定,由于其簡捷、快速的方式,适用于分布式超媒體資訊系統。它于1990年提出,經過幾年的使用與發展,得到不斷地完善和擴充。目前在WWW中使用的是HTTP/1.0的第六版,HTTP/1.1的規範化工作正在進行之中,而且HTTP-NG(Next Generation of HTTP)的建議已經提出。

    簡單來說,就是一個基于應用層的通信規範:雙方要進行通信,大家都要遵守一個規範,這個規範就是HTTP協定。

 1.特點:

  (1)支援客戶/伺服器模式。

  (2)簡單快速:客戶向伺服器請求服務時,隻需傳送請求方法和路徑。請求方法常用的有GET、HEAD、POST。每種方法規定了客戶與伺服器聯系的類型不同。由于HTTP協定簡單,使得HTTP伺服器的程式規模小,因而通信速度很快。

  (3)靈活:HTTP允許傳輸任意類型的資料對象。正在傳輸的類型由Content-Type加以标記。

  (4)無連接配接:無連接配接的含義是限制每次連接配接隻處理一個請求。伺服器處理完客戶的請求,并收到客戶的應答後,即斷開連接配接。采用這種方式可以節省傳輸時間。

  (5)無狀态:HTTP協定是無狀态協定。無狀态是指協定對于事務處理沒有記憶能力。缺少狀态意味着如果後續處理需要前面的資訊,則它必須重傳,這樣可能導緻每次連接配接傳送的資料量增大。另一方面,在伺服器不需要先前資訊時它的應答就較快。

  注意:其中(4)(5)是面試中常用的面試題。雖然HTTP協定(應用層)是無連接配接,無狀态的,但其所依賴的TCP協定(傳輸層)卻是常連接配接、有狀态的,而TCP協定(傳輸層)又依賴于IP協定(網絡層)。

 2.HTTP消息的結構

 (1)Request 消息分為3部分,第一部分叫請求行, 第二部分叫http header消息頭, 第三部分是body正文,header和body之間有個空行, 結構如下圖

JavaScript大檔案上傳解決方案

 (2)Response消息的結構, 和Request消息的結構基本一樣。 同樣也分為三部分,第一部分叫request line狀态行, 第二部分叫request header消息體,第三部分是body正文, header和body之間也有個空行,  結構如下圖

JavaScript大檔案上傳解決方案

下面是使用Fiddler捕捉請求baidu的Request消息機構和Response消息機構:

JavaScript大檔案上傳解決方案
JavaScript大檔案上傳解決方案

因為沒有輸入任何表單資訊,故request的消息正文為空,大家可以找一個登入的頁面試試看。

先到這裡,HTTP協定的知識網上很豐富,在這裡就不再熬述了。

二. 檔案上傳的三種實作

1. Jsp/servlet 實作檔案上傳

這是最常見也是最簡單的方式

(1)實作檔案上傳的Jsp頁面 

JavaScript大檔案上傳解決方案

(2)負責接檔案的FileUploadServlet

import java.io.File;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.InputStream;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.log4j.Logger;

// @WebServlet(name = "FileLoadServlet", urlPatterns = {"/fileload"})

public class FileLoadServlet extends HttpServlet {

    private static Logger logger = Logger.getLogger(FileLoadServlet.class);

    private static final long serialVersionUID = 1302377908285976972L;

    @Override

    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        logger.info("------------ FileLoadServlet ------------");

        if (request.getContentLength() > 0) {           

               InputStream inputStream = null;

               FileOutputStream outputStream = null;              

            try {               

                inputStream = request.getInputStream();

                // 給新檔案拼上時間毫秒,防止重名

                long now = System.currentTimeMillis();

                File file = new File("c:/", "file-" + now + ".txt");

                file.createNewFile();

                outputStream = new FileOutputStream(file);

                  byte temp[] = new byte[1024];

                  int size = -1;

                  while ((size = inputStream.read(temp)) != -1) { // 每次讀取1KB,直至讀完

                      outputStream.write(temp, 0, size);

                  }               

                  logger.info("File load success.");

              } catch (IOException e) {

                  logger.warn("File load fail.", e);

                  request.getRequestDispatcher("/fail.jsp").forward(request, response);

              } finally {

                  outputStream.close();

                  inputStream.close();

              }

          }       

          request.getRequestDispatcher("/succ.jsp").forward(request, response);

      }   

  }

FileUploadServlet的配置,推薦采用servlet3.0注解的方式更友善

<servlet>

    <servlet-name>FileLoadServlet</servlet-name>

    <servlet-class>com.juxinli.servlet.FileLoadServlet</servlet-class>

</servlet>

<servlet-mapping>

    <servlet-name>FileLoadServlet</servlet-name>

    <url-pattern>/fileload</url-pattern>

</servlet-mapping>

(3)運作效果

JavaScript大檔案上傳解決方案

點選"submit"

JavaScript大檔案上傳解決方案

頁面轉向檔案上傳成功的頁面,再去C槽看看,發現多了一個檔案:file-1433417127748.txt,這個就是剛上傳的檔案

JavaScript大檔案上傳解決方案

我們打開看看,發現和原來的文本有些不一樣

JavaScript大檔案上傳解決方案

結合前面講的HTTP協定的消息結構,不難發現這些文本就是去掉"請求頭"後的"Request消息體"。是以,如果要得到與上傳檔案一緻的文本,還需要一些字元串操作,這些就留給大家了。

另外,大家可以試試一個Jsp頁面上傳多個檔案,會有不一樣的精彩哦o(∩_∩)o ,不解釋。

2. 模拟Post請求/servlet 實作檔案上傳

剛才我們是使用Jsp頁面來上傳檔案,假如用戶端不是webapp項目呢,顯然剛才的那種方式有些捉襟見襯了。

這裡我們換種思路,既然頁面上通過點選可以實作檔案上傳,為何不能通過HttpClient來模拟浏覽器發送上傳檔案的請求呢。關于HttpClient ,大家可以自己去了解。

 (1)還是這個項目,啟動servlet服務

 (2)模拟請求的FileLoadClient

import java.io.BufferedReader;

import java.io.File;

import java.io.InputStream;

import java.io.InputStreamReader;

import org.apache.commons.httpclient.HttpClient;

import org.apache.commons.httpclient.HttpStatus;

import org.apache.commons.httpclient.methods.PostMethod;

import org.apache.commons.httpclient.methods.multipart.FilePart;

import org.apache.commons.httpclient.methods.multipart.MultipartRequestEntity;

import org.apache.commons.httpclient.methods.multipart.Part;

import org.apache.log4j.Logger;

public class FileLoadClient {

    private static Logger logger = Logger.getLogger(FileLoadClient.class);

    public static String fileload(String url, File file) {

        String body = "{}";

        if (url == null || url.equals("")) {

            return "參數不合法";

        }

        if (!file.exists()) {

            return "要上傳的檔案名不存在";

        }

        PostMethod postMethod = new PostMethod(url);

        try {           

            // FilePart:用來上傳檔案的類,file即要上傳的檔案

            FilePart fp = new FilePart("file", file);

            Part[] parts = { fp };

            // 對于MIME類型的請求,httpclient建議全用MulitPartRequestEntity進行包裝

            MultipartRequestEntity mre = new MultipartRequestEntity(parts, postMethod.getParams());

            postMethod.setRequestEntity(mre);

            HttpClient client = new HttpClient();

            // 由于要上傳的檔案可能比較大 , 是以在此設定最大的連接配接逾時時間

            client.getHttpConnectionManager().getParams() .setConnectionTimeout(50000);

            int status = client.executeMethod(postMethod);

            if (status == HttpStatus.SC_OK) {

                InputStream inputStream = postMethod.getResponseBodyAsStream();

                BufferedReader br = new BufferedReader(new InputStreamReader(inputStream));

                StringBuffer stringBuffer = new StringBuffer();

                String str = "";

                while ((str = br.readLine()) != null) {

                    stringBuffer.append(str);

                }               

                body = stringBuffer.toString();               

            } else {

                body = "fail";

            }

        } catch (Exception e) {

            logger.warn("上傳檔案異常", e);

        } finally {

            // 釋放連接配接

            postMethod.releaseConnection();

        }        

        return body;

    }   

    public static void main(String[] args) throws Exception {

        String body = fileload("http://localhost:8080/jsp_upload-servlet/fileload", new File("C:/1111.txt"));

        System.out.println(body);

    }    

}

(3)在Eclipse中運作FileLoadClient程式來發送請求,運作結果:

<html><head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body><h2>File upload success</h2><a href="index.jsp" target="_blank" rel="external nofollow" >return</a></body></html>

列印了:檔案上傳成功的succ.jsp頁面

JavaScript大檔案上傳解決方案

有沒有發現什麼,是不是和前面Jsp頁面上傳的結果類似?對的,還是去掉"請求頭"後的"Request消息體"。 

這種方式也很簡單,負責接收檔案的FileUploadServlet沒有變,隻要在用戶端把檔案讀取到流中,然後模拟請求servlet就行了。

 3.模拟Post請求/Controller(SpringMvc)實作檔案上傳

 終于到第三種方式了,主要難點在于搭建maven+jetty+springmvc環境,接收檔案的service和模拟請求的用戶端 和上面相似。

 (1)模拟請求的FileLoadClient未變

import java.io.BufferedReader;

import java.io.File;

import java.io.InputStream;

import java.io.InputStreamReader;

import org.apache.commons.httpclient.HttpClient;

import org.apache.commons.httpclient.HttpStatus;

import org.apache.commons.httpclient.methods.PostMethod;

import org.apache.commons.httpclient.methods.multipart.FilePart;

import org.apache.commons.httpclient.methods.multipart.MultipartRequestEntity;

import org.apache.commons.httpclient.methods.multipart.Part;

import org.apache.log4j.Logger;

public class FileLoadClient {   

    private static Logger logger = Logger.getLogger(FileLoadClient.class);

    public static String fileload(String url, File file) {

        String body = "{}";       

        if (url == null || url.equals("")) {

            return "參數不合法";

        }

        if (!file.exists()) {

            return "要上傳的檔案名不存在";

        }

        PostMethod postMethod = new PostMethod(url);       

        try {           

            // FilePart:用來上傳檔案的類,file即要上傳的檔案

            FilePart fp = new FilePart("file", file);

            Part[] parts = { fp };

            // 對于MIME類型的請求,httpclient建議全用MulitPartRequestEntity進行包裝

            MultipartRequestEntity mre = new MultipartRequestEntity(parts, postMethod.getParams());

            postMethod.setRequestEntity(mre);

            HttpClient client = new HttpClient();

            // 由于要上傳的檔案可能比較大 , 是以在此設定最大的連接配接逾時時間

            client.getHttpConnectionManager().getParams() .setConnectionTimeout(50000);

            int status = client.executeMethod(postMethod);

            if (status == HttpStatus.SC_OK) {

                InputStream inputStream = postMethod.getResponseBodyAsStream();

                BufferedReader br = new BufferedReader(new InputStreamReader(inputStream));

                StringBuffer stringBuffer = new StringBuffer();

                String str = "";

                while ((str = br.readLine()) != null) {

                    stringBuffer.append(str);

                }               

                body = stringBuffer.toString();                

            } else {

                body = "fail";

            }

        } catch (Exception e) {

            logger.warn("上傳檔案異常", e);

        } finally {

            // 釋放連接配接

            postMethod.releaseConnection();

        }       

        return body;

    }   

    public static void main(String[] args) throws Exception {

        String body = fileload("http://localhost:8080/fileupload/upload", new File("C:/1111.txt"));

        System.out.println(body);

    }

}

(2)servlet換為springMvc中的Controller

import java.io.File;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.InputStream;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.log4j.Logger;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

@Controller

@RequestMapping("/fileupload")

public class FileUploadService {

    private Logger logger = Logger.getLogger(FileUploadService.class);

    @RequestMapping(consumes = "multipart/form-data", value = "/hello", method = RequestMethod.GET)

    public void hello(HttpServletRequest request, HttpServletResponse response) throws IOException {        

        response.getWriter().write("Hello, jetty server start ok.");

    }

    @RequestMapping(consumes = "multipart/form-data", value = "/upload", method = RequestMethod.POST)

    public void uploadFile(HttpServletRequest request, HttpServletResponse response) throws IOException {

        String result = "";

        if (request.getContentLength() > 0) {           

               InputStream inputStream = null;

               FileOutputStream outputStream = null;              

            try {

                inputStream = request.getInputStream();

                // 給新檔案拼上時間毫秒,防止重名

                long now = System.currentTimeMillis();

                File file = new File("c:/", "file-" + now + ".txt");

                file.createNewFile();

                outputStream = new FileOutputStream(file);               

                byte temp[] = new byte[1024];

                int size = -1;

                while ((size = inputStream.read(temp)) != -1) { // 每次讀取1KB,直至讀完

                    outputStream.write(temp, 0, size);

                }

                logger.info("File load success.");

                result = "File load success.";

            } catch (IOException e) {

                logger.warn("File load fail.", e);

                result = "File load fail.";

            } finally {

                outputStream.close();

                inputStream.close();

            }

        }       

        response.getWriter().write(result);

    }

}

 (3)啟動jetty的核心代碼,在Eclipse裡面右鍵可以啟動,也可以把項目打成jar報啟動

import org.apache.log4j.Logger;

import org.eclipse.jetty.server.Connector;

import org.eclipse.jetty.server.Server;

import org.eclipse.jetty.server.ServerConnector;

import org.eclipse.jetty.webapp.WebAppContext;

public class Launcher

{   

    private static Logger logger = Logger.getLogger(Launcher.class);

    private static final int PORT = 8080;

    private static final String WEBAPP = "src/main/webapp";

    private static final String CONTEXTPATH = "/";

    private static final String DESCRIPTOR = "src/main/webapp/WEB-INF/web.xml";

    public static Server createServer(int port, String webApp, String contextPath, String descriptor) {

        Server server = new Server();

        //設定在JVM退出時關閉Jetty的鈎子

        //這樣就可以在整個功能測試時啟動一次Jetty,然後讓它在JVM退出時自動關閉

        server.setStopAtShutdown(true);

        ServerConnector connector = new ServerConnector(server);

        connector.setPort(port);

        //解決Windows下重複啟動Jetty不報告端口沖突的問題

        //在Windows下有個Windows + Sun的connector實作的問題,reuseAddress=true時重複啟動同一個端口的Jetty不會報錯

        //是以必須設為false,代價是若上次退出不幹淨(比如有TIME_WAIT),會導緻新的Jetty不能啟動,但權衡之下還是應該設為False

        connector.setReuseAddress(false);

        server.setConnectors(new Connector[]{connector});

        WebAppContext webContext = new WebAppContext(webApp, contextPath);

        webContext.setDescriptor(descriptor);

        // 設定webapp的位置

        webContext.setResourceBase(webApp);

        webContext.setClassLoader(Thread.currentThread().getContextClassLoader());

        server.setHandler(webContext);       

        return server;

    }

    public void startJetty() {

        final Server server = Launcher.createServer(PORT, WEBAPP, CONTEXTPATH, DESCRIPTOR);

        try {

            server.start();

            server.join();           

        } catch (Exception e) {

            logger.warn("啟動 jetty server 失敗", e);

            System.exit(-1);

        }

    }

    public static void main(String[] args) {       

        (new Launcher()).startJetty();

        // jetty 啟動後的測試url

        // http://localhost:8080/fileupload/hello

    }   

}

springMvc的配置不貼了,大家可以下載下傳源碼下來看。

(4)運作效果

上傳包含1W個檔案的檔案夾,正常

JavaScript大檔案上傳解決方案

大型檔案續傳功能正常 。

JavaScript大檔案上傳解決方案

檔案批量上傳正常

JavaScript大檔案上傳解決方案

伺服器中已經根據日期+GUID生成了目錄

JavaScript大檔案上傳解決方案

資料庫中也有記錄

JavaScript大檔案上傳解決方案

後端代碼邏輯大部分是相同的,目前能夠支援MySQL,Oracle,SQL。在使用前需要配置一下資料庫

控件源碼下載下傳:

asp.net源碼下載下傳,jsp-springboot源碼下載下傳,jsp-eclipse源碼下載下傳,jsp-myeclipse源碼下載下傳,php源碼下載下傳,csharp-winform源碼下載下傳,vue-cli源碼下載下傳,c++源碼下載下傳

詳細配置資訊及思路