斷點續傳、大檔案上傳、秒傳、webuploader

demo下載下傳位址：點選打開連結

一、 功能性需求與非功能性需求

1. 要求操作便利，一次選擇多個檔案進行上傳；
2. 支援大檔案上傳（1G），同時需要保證上傳期間使用者電腦不出現卡死等體驗；
3. 互動友好，能夠及時回報上傳的進度；
4. 服務端的安全性，不因上傳檔案功能導緻JVM記憶體溢出影響其他功能使用；
5. 最大限度利用網絡上行帶寬，提高上傳速度；

二、 設計分析

1. 對于大檔案的處理，無論是使用者端還是服務端，如果一次性進行讀取發送、接收都是不可取，很容易導緻記憶體問題。是以對于大檔案上傳，采用切塊分段上傳
2. 從上傳的效率來看，利用多線程并發上傳能夠達到最大效率。

三、解決方案：

檔案上傳頁面的前端可以選擇使用一些比較好用的上傳元件，例如百度的開源元件WebUploader，這個元件基本能滿足檔案上傳的一些日常所需功能，如異步上傳檔案，拖拽式上傳，黏貼上傳，上傳進度監控，檔案縮略圖，甚至是大檔案斷點續傳，大檔案秒傳。

1.1 在頁面導入所需css，js

<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/webuploader.css" target="_blank" rel="external nofollow" >
<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 下載下傳位址： http://download.csdn.net/download/qq_16239775/10267887