文件上傳是最古老的互聯網操作之一，20多年來幾乎沒有怎麽變化，還是操作麻煩、缺乏交互、用戶體驗差。

一、前端代碼

英國程序員Remy Sharp總結了這些新的接口 ，本文在他的基礎之上，討論在前端采用HTML5的API，對文件上傳進行漸進式增強：

    * iframe上傳
　　 * ajax上傳
　　 * 進度條
　　 * 文件預覽
　　 * 拖放上傳 

1.1 傳統形式

　　文件上傳的傳統形式，是使用表單元素file，參考 http://www.ruanyifeng.com/blog/2012/08/file_upload.html ：

  <form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data" >
　　　　<input type="file" id="upload" name="upload" /> <br />
　　　　<input type="submit" value="Upload" />
  </form>

所有瀏覽器都支持上面的代碼，點擊上傳按鈕後，網頁"鎖死"，用戶只能等待上傳結束，然後瀏覽器刷新，跳到表單的action屬性指定的網址。

1.2 iframe上傳

　　用戶點擊submit時，動態插入一個iframe元素

   var form = $("#upload-form");
　　form.on(‘submit‘,function() {
　　　　// 此處動態插入iframe元素
　　});

　　var seed = Math.floor(Math.random() * 1000);

　　var id = "uploader-frame-" + seed;

　　var callback = "uploader-cb-" + seed;

　　var iframe = $(‘<iframe id="‘+id+‘" name="‘+id+‘" >‘);

　　var url = form.attr(‘action‘);

　　form.attr(‘target‘, id).append(iframe).attr(‘action‘, url + ‘?iframe=‘ + callback);

1.3 ajax上傳

　　HTML5提出了XMLHttpRequest對象的第二版，從此ajax能夠上傳文件了。這是真正的"異步上傳"，是將來的主流。

  form.on(‘submit‘,function() {
　　　　// 此處進行ajax上傳
 

  });
 
　// 檢查是否支持FormData
　　if(window.FormData) {　
　　　　var formData = new FormData();
　　　　// 建立一個upload表單項，值為上傳的文件
　　　　formData.append(‘upload‘, document.getElementById(‘upload‘).files[0]);
　　　　var xhr = new XMLHttpRequest();
　　　　xhr.open(‘POST‘, $(this).attr(‘action‘));
　　　　// 定義上傳完成後的回調函數
　　　　xhr.onload = function () {
　　　　　　if (xhr.status === 200) {
　　　　　　　　console.log(‘上傳成功‘);
　　　　　　} else {
　　　　　　　　console.log(‘出錯了‘);
　　　　　　}
　　　　};
　　　　xhr.send(formData);
　　} 

1.4 進度條

　　XMLHttpRequest第二版還定義了一個progress事件，可以用來制作進度條。

//在頁面中放置一個HTML元素progress
<progress id="uploadprogress" min="0" max="100" value="0">0</progress>

//定義進度progress事件的回調函數
　xhr.upload.onprogress = function (event) {
　　　　if (event.lengthComputable) {
　　　　　　var complete = (event.loaded / event.total * 100 | 0);
　　　　　　var progress = document.getElementById(‘uploadprogress‘);
　　　　　　progress.value = progress.innerHTML = complete;
　　　　}
  }

二、後端

　　Spring 框架中使用類似CommonsMultipartFile對象處理表二進制文件信息，細心地會發現在利用框架下封裝的Multiform接口進行文件上傳時，會先把文件傳輸至tomcat一個指定的work目錄之下，然後再傳輸到指定的路徑。小文件上傳這個時間延遲基本上可以忽略，但是在大文件上傳時，這個上傳的速度就很讓人頭疼，上傳過程中的進度信息無法訪問。

　　因此我們有必要從瀏覽器請求字節流中解析Multiform協議，實現不依靠框架內置對象，取得用戶請求的所有數據，同時，用戶上傳的大小不受限制，而且在傳輸過程中，我們可以實時獲取傳輸進度。

參考https://www.cnblogs.com/darkprince/p/5114936.html

2.1 普通Post請求協議及MultiPart協議

　 因為一次傳輸的大文件MultiPart數據包，字節數可能會很大(1G甚至以上)，為了獲取實時進度信息，以及內存開銷控制，我們需要將接收過程分成多段處理，即將數據包分段循環接收(例：每次循環只接收64K數據，期間即可更新當前的進度信息)。本次我們采用Spring框架來實現“大文件傳輸”功能，要點設計結構圖如下：

2.2 源碼解析

Filter對象：

　　用於負責接收MultiPart原始數據的Filter，用以在Spring內置對象之前接收用戶請求。需要在Web.xml中進行配置，Web啟動後，該Filter即啟動，當用戶請求到來時需要判斷該MultiPart數據信息是否合法，接收並進行解析。

ServletInputStream/BufferedInputStream對象：

　　使用以上兩對象，可對本次請求進行按字節流接收。在此可創建比較小的接收緩沖區，依靠BufferedInputStream的read進行分段循環接收。

getBoundarySectFromBuf()函數：

　　自定義函數，我們需要該函數從分段緩沖區中分析可能包含的多個Form表單信息，或者部分表單信息，或者二進制文件片段信息。對於表單信息分析後填充表單數據結構，對於二進制文件信息需要寫文件。該函數需要完成邊接收邊解析邊寫文件的重要工作。

ProgressInfo對象：

　　進度信息類,描述了一次上傳請求的進度信息。該對象會用來被客戶端輪詢請求，以獲得當前傳輸大文件過程中的進度信息。

FormPart對象及listFormPart集合：

　　FormPart對於單個Form表單的描述。listFormPart為本次請求的全部表單描述集合。即供後續代碼調用的全部表單項內容。

Controller層getProgInfo()處理函數：

　　該函數將接受來自瀏覽器的“獲得進度信息請求”，並從當前ServletContext公共內存區中找到與Progesss ID對應的進度信息對象ProgressInfo，以XML的形式返回給瀏覽器。該函數會被客戶端輪詢請求。

代碼在 https://github.com/chilichen/UploadBigFile，其中有三個方法需要自己寫出來：

   //1、在byte數組上查詢是否含有子數組，若存在則返回數組的起始位置
     public int indexOf(byte[] buf, byte[] key, int scanStart){
             if(buf == key[0] || key == null){return -1;}
             if(scanStart < 0){return 0;}
             for(int i = 0; scanStart; i < buf.length - key.length; i++){
                  if(buf[i] == key[0]){
                          int m = 0;
                          for(int j = 0; scanStart; j< key.length; j++){  
                               if(buf[i + j] == key[j]){ m++;}else{ break;}    
                         if(m == key.length){ return i;}  
                    }
             }
          return -1;
    }

     //2、在byte數組轉換成String
      public String byteToString(byte[] bytes){
          if(bytes == null){ return null ;}
          String s = "";
          ByteBuffer bb = null;
          CharBuffer cb = null;
          try{
              try{
                      bb = ByteBuffer.wrap(bytes);
                      Charset charset = StandardCharsets.UTF_8;
                      CharsetDecoder decoder = charset.newDecoder();
                      cb = decoder.decode(bb);
                      s = cb.toString();
                }catch( Exception e){}
            }finally{
                if(cb != null){ 
　　　　　　　　　　　　cb.clear();
　　　　　　　　　　　 }
                if(bb!= null){ 
　　　　　　　　　　　　bb.clear(); 
　　　　　　　　　　　　}
　　　　　　}　　
          return s.trim();
    }

  //3、通過byte[]獲取當前行
    public LineReturn getLine(){
           int lineStart = indexOf(buf, "\r\n".getBytes(), start);
            LineReturn line = new LineReturn();
            line.setEndindex(lineStart + 2);
            byte[] lineByte = Arrays.copyOfRange(buf, start, line.getEndIndex());
            line.setLine(bytesToString(lineByte)); 
            return line;
    }

java實現大文件上傳