web選擇文件夾上傳

咱們平時常常作的是上傳文件，上傳文件夾與上傳文件相似，但也有一些不一樣之處，此次作了上傳文件夾就記錄下以備後用。

此次項目的需求：

支持大文件的上傳和續傳，要求續傳支持全部瀏覽器，包括ie6,ie7,ie8,ie9,Chrome,Firefox,360安全瀏覽器，而且刷新瀏覽器後仍然可以續傳，重啓瀏覽器（關閉瀏覽器後再打開）仍然可以繼續上傳，重啓電腦後仍然可以上傳

支持文件夾的上傳，要求服務端可以保留層級結構，而且可以續傳。須要支持10萬個以上的文件夾上傳。

支持低版本的系統和瀏覽器，由於這個項目的最終運行環境在政府，政府的配置都通常，職員都是辦公用，內存都不大，基本上以Windows XP的系統爲主。

 

1、介紹enctype

enctype 屬性規定發送到服務器以前應該如何對錶單數據進行編碼。

enctype做用是告知服務器請求正文的MIME類型（請求消息頭content-type的做用同樣）

1、1 enctype的取值有三種

值	描述
application/x-www-form-urlencoded	在發送前編碼全部字符（默認）
multipart/form-data	不對字符編碼。每個表單項分割爲一個部件
text/plain	空格轉換爲 「+」 加號，但不對特殊字符編碼。

1. 當enctype=’application/x-www-form-urlencoded’

2.當enctype=’multipart/form-data’

 

經過觀察發現這個的請求體就發生了變化。這種請求體被稱之爲多部件請求體。

什麼是多部件請求體：就是把每個表單項分割爲一個部件。

以請求頭的content-type的boundary後面的一串隨機字符串做爲分割標識

普通表單項：

//name的意思是文本框裏面name的屬性值，而admin是咱們輸入的文本值

Content-Disposition: form-data; name="username"

admin

文件表單項

//filename的意思是：咱們上傳的文件名稱，content-Type的意思是：MIME類型，asdasdas的意思是：文件裏面的內容

Content-Disposition: form-data; name="upload"; filename="a.txt"

Content-Type: text/plain

asdasdas

3. 當enctype=’text/plain’

 

w3c稱：空格會變成」+」加號，可是我這裏沒有發現，只有當get請求的時候，空格會變成」+」號

 

進入正題

完成上傳須要知足3個必要的條件

提供form表單，method必須是post，由於get請求的傳輸數據通常爲2kb，不一樣瀏覽器不同。

form表單屬性enctype的必須是multipart/form-data

提供input type=」file」類的上傳輸入域

大體實現原理：當enctype的值是multipart/form-data時，瀏覽器會把每一個表單項進行分割，分割成不一樣的部件，以boundary的值爲分割標識，這個標識的字符串是隨機生成的，最後一個表單項的分割標識字符串末尾會多兩個」- -「，表明結束。服務端用request.getHeader(「content-type」)獲取分割字符串，而後進行解析。

 

 

代碼實現

1、開發環境搭建

準備兩個第三方jar包

commons-io包

commons-upload包

全部依賴包

 

代碼實現

<%@page language="java" import="up6.DBFile" pageEncoding="UTF-8"%>

<%@page contentType="text/html;charset=UTF-8"%>

<%@page import="up6.FileBlockWriter" %>

<%@page import="up6.XDebug" %>

<%@page import="up6.*" %>

<%@page import="up6.biz.*" %>

<%@page import="org.apache.commons.fileupload.FileItem" %>

<%@page import="org.apache.commons.fileupload.FileItemFactory" %>

<%@page import="org.apache.commons.fileupload.FileUploadException" %>

<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory" %>

<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload" %>

<%@page import="org.apache.commons.lang.*" %>

<%@page import="java.net.URLDecoder"%>

<%@page import="java.util.Iterator"%>

<%@page import="net.sf.json.JSONObject"%>

<%@page import="java.util.List"%>

<%

out.clear();

String uid             = request.getHeader("uid");//

String id              = request.getHeader("id");

String lenSvr      = request.getHeader("lenSvr");

String lenLoc      = request.getHeader("lenLoc");

String blockOffset= request.getHeader("blockOffset");

String blockSize   = request.getHeader("blockSize");

String blockIndex  = request.getHeader("blockIndex");

String blockMd5        = request.getHeader("blockMd5");

String complete        = request.getHeader("complete");

String pathSvr         = "";

 

//參數爲空

if(  StringUtils.isBlank( uid )

     || StringUtils.isBlank( id )

     || StringUtils.isBlank( blockOffset ))

{

     XDebug.Output("param is null");return;

}

boolean isMultipart = ServletFileUpload.isMultipartContent(request);

FileItemFactory factory = new DiskFileItemFactory();  

ServletFileUpload upload = new ServletFileUpload(factory);

List files = null;

try {files = upload.parseRequest(request);}

catch (FileUploadException e)

{out.println("read file data error:" + e.toString());return;}

 

FileItem rangeFile = null;

Iterator fileItr = files.iterator();

while (fileItr.hasNext())

{

     rangeFile = (FileItem) fileItr.next();

     if(StringUtils.equals( rangeFile.getFieldName(),"pathSvr"))

     {

         pathSvr = rangeFile.getString();

         pathSvr = PathTool.url_decode(pathSvr);

     }

}

 

boolean verify = false;

String msg = "";

String md5Svr = "";

long blockSizeSvr = rangeFile.getSize();

if(!StringUtils.isBlank(blockMd5)){md5Svr = Md5Tool.fileToMD5(rangeFile.getInputStream());}

verify = Integer.parseInt(blockSize) == blockSizeSvr;

if(!verify){ msg = "block size error sizeSvr:" + blockSizeSvr + "sizeLoc:" + blockSize;}

if(verify && !StringUtils.isBlank(blockMd5))

{

     verify = md5Svr.equals(blockMd5); if(!verify) msg = "block md5 error";

}

if(verify)

{

     FileBlockWriter res = new FileBlockWriter();

     if( Integer.parseInt(blockIndex)==1) res.CreateFile(pathSvr,Long.parseLong(lenLoc));

     res.write( Long.parseLong(blockOffset),pathSvr,rangeFile);

     up6_biz_event.file_post_block(id,Integer.parseInt(blockIndex));

    

     JSONObject o = new JSONObject();

     o.put("msg", "ok");

     o.put("md5", md5Svr); 

     o.put("offset", blockOffset);

     msg = o.toString();

}

rangeFile.delete();

out.write(msg);

%>

下載的必須條件

兩個頭一個流

content-type

Content-Type是返回消息中很是重要的內容，表示文檔內容屬於什麼MIME類型。

瀏覽器會根據Content-Type來決定如何顯示返回的消息體內容。

默認值是text/html

可使用request.getServletContext().getMimeType(「文件名」)獲取MIME類型。

Content-Disposition

Content-disposition 是 MIME 協議的擴展，MIME 協議指示 MIME 用戶代理如何顯示附加的文件。

默認值是inline，表示在瀏覽器窗口中打開。

服務端向客戶端遊覽器發送文件時，若是是瀏覽器支持的文件類型，通常會默認使用瀏覽器打開，好比txt、jpg等，會直接在瀏覽器 中顯示。

若是須要提示用戶保存，利用Content-Disposition進行一下處理，關鍵在於必定要加上attachment。

例如：Content-Disposition:attachment;filename=xxx，瀏覽器就會激活下載框對話框， attachment 表示附件, filname 後面跟隨的是顯示在下載框中的文件名稱。

流

下載就是向客戶端響應字節數據! 將一個文件變成字節數組, 使用 response.getOutputStream()

來響應給瀏覽器。

代碼以下，此代碼已經實現了斷點續傳功能，用戶在下載過程能夠暫停，和繼續下載，對服務器形成的壓力也比較小。

String fid             = request.getHeader("id");

String blockIndex = request.getHeader("blockIndex");//基於1

String blockOffset     = request.getHeader("blockOffset");//塊偏移，相對於整個文件

String blockSize   = request.getHeader("blockSize");//塊大小（當前須要下載的大小）

String pathSvr         = request.getHeader("pathSvr");//文件在服務器的位置

pathSvr            = PathTool.url_decode(pathSvr);

 

if (  StringUtils.isBlank(fid)

     ||StringUtils.isBlank(blockIndex)

     ||StringUtils.isEmpty(blockOffset)

     ||StringUtils.isBlank(blockSize)

     ||StringUtils.isBlank(pathSvr))

{

     response.setStatus(500);

     response.setHeader("err","參數爲空");

     return;

}

File f = new File(pathSvr);

//文件不存在

if(!f.exists())

{

     response.setStatus(500);

     OutputStream os = response.getOutputStream();

     System.out.println(String.format("%s 文件不存在",pathSvr));

     os.close();

     return;

}

long fileLen = f.length();

 

response.setContentType("application/x-download");

response.setHeader("Pragma","No-cache"); 

response.setHeader("Cache-Control","no-cache");

response.addHeader("Content-Length",blockSize); 

response.setDateHeader("Expires", 0);

 

OutputStream os = response.getOutputStream();

try

{

     RandomAccessFile raf = new RandomAccessFile(pathSvr,"r");

    

     int readToLen = Integer.parseInt(blockSize);

     int readLen = 0;

     raf.seek( Long.parseLong(blockOffset) );//定位索引

     byte[] data = newbyte[1048576];

    

     while( readToLen > 0 )

     {

         readLen = raf.read(data,0,Math.min(1048576,readToLen) );

         readToLen -= readLen;

         os.write(data, 0, readLen);

        

     }

     os.flush();

     os.close();  

     raf.close();

     os = null;

     response.flushBuffer();

    

     out.clear();

     out = pageContext.pushBody();

}

catch(Exception e)

{

     response.setStatus(500);

     os.close();

     out.close();

     e.printStackTrace();

}

finally

{   

     if(os != null)

     {

         os.close();       

         os = null;

     }

     out.clear();

     out = pageContext.pushBody();

}%>

 

加載文件列表，在下載列表中顯示出來

後端代碼邏輯大部分是相同的，目前可以支持MySQL,Oracle,SQL。在使用前須要配置一下數據庫，能夠參考我寫的這篇文章：http://blog.ncmem.com/wordpress/2019/08/12/java-http%E5%A4%A7%E6%96%87%E4%BB%B6%E6%96%AD%E7%82%B9%E7%BB%AD%E4%BC%A0%E4%B8%8A%E4%BC%A0/