demo下載地址：jsp-Eclipse,jsp-MyEclipse,PHP,ASP.NET
一、 功能性需求與非功能性需求
要求操作便利，一次選擇多個文件和文件夾進行上傳；
支持PC端全平台操作系統，Windows,Linux,Mac
支持文件和文件夾的批量下載，斷點續傳。刷新頁面后繼續傳輸。關閉瀏覽器后保留進度信息。
支持文件夾批量上傳下載，服務器端保留文件夾層級結構，服務器端文件夾層級結構與本地相同。
支持大文件批量上傳（20G）和下載，同時需要保證上傳期間用戶電腦不出現卡死等體驗；
支持斷點續傳，關閉瀏覽器或刷新瀏覽器后仍然能夠保留進度。
支持文件夾結構管理，支持新建文件夾，支持文件夾目錄導航
交互友好，能夠及時反饋上傳的進度；
服務端的安全性，不因上傳文件功能導致JVM內存溢出影響其他功能使用；
最大限度利用網絡上行帶寬，提高上傳速度；
二、 設計分析
對於大文件的處理，無論是用戶端還是服務端，如果一次性進行讀取發送、接收都是不可取，很容易導致內存問題。所以對於大文件上傳，采用切塊分段上傳
從上傳的效率來看，利用多線程並發上傳能夠達到最大效率。
三、解決方案：
文件上傳頁面的前端可以選擇使用一些比較好用的上傳組件，例如百度的開源組件WebUploader，澤優軟件的up6，這些組件基本能滿足文件上傳的一些日常所需功能，如異步上傳文件，文件夾，拖拽式上傳，黏貼上傳，上傳進度監控，文件縮略圖，甚至是大文件斷點續傳，大文件秒傳。
1.1 在頁面導入所需css，js
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/css/webuploader.css">
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/webuploader.js"></script>
1.2 編寫上傳頁面標簽
<div id="uploader">
<!-- 顯示文件列表信息 -->
<ul id="fileList"></ul>
<!-- 選擇文件區域 -->
<div id="filePicker">點擊選擇文件</div>
</div>
webupload代碼
<script type="text/javascript">
//1.初始化WebUpload，以及配置全局的參數
var uploader = WebUploader.create(
{
//flashk控件的地址
swf: "${pageContext.request.contextPath}/js/Uploader.swf",
//后台提交地址
server:"${pageContext.request.contextPath}/UploadServlet",
//選擇文件控件的標簽
pick:"#filePicker",
//自動上傳文件
auto:true,
}
);
//2.選擇文件后，文件信息隊列展示
// 注冊fileQueued事件：當文件加入隊列后觸發
// file: 代表當前選擇的文件
uploader.on("fileQueued",function(file){
//追加文件信息div
$("#fileList").append("<div id='"+file.id+"' class='fileInfo'><span>"+file.name+"</span><div class='state'>等待上傳...</div><span class='text'></span></div>");
});
//3.注冊上傳進度監聽
//file: 正在上傳的文件
//percentage: 當前進度的比例。最大為1.例如:0.2
uploader.on("uploadProgress",function(file,percentage){
var id = $("#"+file.id);
//更新狀態信息
id.find("div.state").text("上傳中...");
//更新上傳百分比
id.find("span.text").text(Math.round(percentage*100)+"%");
});
//4.注冊上傳完畢監聽
//file:上傳完畢的文件
//response:后台回送的數據，以json格式返回
uploader.on("uploadSuccess",function(file,response){
//更新狀態信息
$("#"+file.id).find("div.state").text("上傳完畢");
});
后端接收上傳數據采用FileUpload 是 Apache commons下面的一個子項目，用來實現Java環境下的文件上傳功能。
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload sfu = new ServletFileUpload(factory);
sfu.setHeaderEncoding("utf-8");
try {
List<FileItem> items = sfu.parseRequest(request);
for(FileItem item:items){
if(item.isFormField()){
//普通信息
}else{
//文件信息
//判斷只有文件才需要進行保存處理
System.out.println("接收的文件名稱:"+item.getName());
//拷貝文件到后台的硬盤
FileUtils.copyInputStreamToFile(item.getInputStream(), new File(serverPath+"/"+item.getName()));
System.out.println("文件保存成功");
}
}
} catch (FileUploadException e) {
e.printStackTrace();
}
效果：
文件和文件夾批量上傳
demo下載地址：jsp-Eclipse,jsp-MyEclipse,PHP,ASP.NET
教程：ASP.NET,JSP,PHP
或者直接到官網上面去看介紹：www.webuploader.net