前言：

WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代檔案上傳元件。在現代的瀏覽器裡面能充分發揮html5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH執行時，相容IE6+，iOS 6+, Android 4+。兩套執行時，同樣的呼叫方式，可供使用者任意選用。

上面的一段話是來自   的介紹，現在做的專案需要用到大檔案的上傳，之前沒有做過，現有的jQuery的uploadify只用於上傳圖片什麼的小檔案，查了網上的資料，這個外掛好像對於大檔案不是很友好，為了安全起見，使用百度的成熟框架，不論是多檔案還是單個的大檔案都是很好用的，沒有很多的問題，關於webuploader的詳細介紹看官網就行：

我的專案是javaweb,開發環境是MyEclipse，頁面使用jsp

1、先將 webuploader-0.1.5.zip 這個檔案下載下來：https://github.com/fex-team/webuploader/releases

根據個人的需求放置自己需要的東西就行，全部放到專案裡也可以，下面是我自己需要的東西：

2、程式碼部分：分為jsp和servlet部分

1、jsp部分程式碼：

1. <scripttype="text/javascript">
2.         var fileMd5;  
3.         //監聽分塊上傳過程中的三個時間點  
4.         WebUploader.Uploader.register({  
5.             "before-send-file":"beforeSendFile",  
6.             "before-send":"beforeSend",  
7.             "after-send-file":"afterSendFile",  
8.         },{  
9.             //時間點1：所有分塊進行上傳之前呼叫此函式  
10.             beforeSendFile:function(file){  
11.                 var deferred
     = WebUploader.Deferred();  
12.                 //1、計算檔案的唯一標記，用於斷點續傳  
13.                 (new WebUploader.Uploader()).md5File(file,0,10*1024*1024)  
14.                     .progress(function(percentage){  
15.                         $('#item1').find("p.state").text("正在讀取檔案資訊...");  
16.                     })  
17.                     .then(function(val){  
18.                         fileMd5=val;  
19.                         $('#item1').find("p.state").text("成功獲取檔案資訊...");  
20.                         //獲取檔案資訊後進入下一步  
21.                         deferred.resolve();  
22.                     });  
23.                 return deferred.promise();  
24.             },  
25.             //時間點2：如果有分塊上傳，則每個分塊上傳之前呼叫此函式  
26.             beforeSend:function(block){  
27.                 var deferred = WebUploader.Deferred();  
28.                 $.ajax({  
29.                     type:"POST",  
30.                     url:"<%=basePath%>Video?action=checkChunk",  
31.                     data:{  
32.                         //檔案唯一標記  
33.                         fileMd5:fileMd5,  
34.                         //當前分塊下標  
35.                         chunk:block.chunk,  
36.                         //當前分塊大小  
37.                         chunkSize:block.end-block.start  
38.                     },  
39.                     dataType:"json",  
40.                     success:function(response){  
41.                         if(response.ifExist){  
42.                             //分塊存在，跳過  
43.                             deferred.reject();  
44.                         }else{  
45.                             //分塊不存在或不完整，重新發送該分塊內容  
46.                             deferred.resolve();  
47.                         }  
48.                     }  
49.                 });  
50.                 this.owner.options.formData.fileMd5 = fileMd5;  
51.                 deferred.resolve();  
52.                 return deferred.promise();  
53.             },  
54.             //時間點3：所有分塊上傳成功後呼叫此函式  
55.             afterSendFile:function(){  
56.                 //如果分塊上傳成功，則通知後臺合併分塊  
57.                 $.ajax({  
58.                     type:"POST",  
59.                     url:"<%=basePath%>Video?action=mergeChunks",  
60.                     data:{  
61.                         fileMd5:fileMd5,  
62.                     },  
63.                     success:function(response){  
64.                         alert("上傳成功");  
65.                         var path = "uploads/"+fileMd5+".mp4";  
66.                         $("#item1").attr("src",path);  
67.                     }  
68.                 });  
69.             }  
70.         });  
71.         var uploader = WebUploader.create({  
72.             // swf檔案路徑  
73.             swf: '<%=basePath%>scripts/webuploader-0.1.5/Uploader.swf',  
74.             // 檔案接收服務端。  
75.             server: '<%=basePath%>UploadVideo',  
76.             // 選擇檔案的按鈕。可選。  
77.             // 內部根據當前執行是建立，可能是input元素，也可能是flash.  
78.             pick: {id: '#add_video',   <spanstyle="background-color: rgb(255, 204, 0);">//這個id是你要點選上傳檔案的id，自己設定就好</span>
79.             multiple:false},  
80.             // 不壓縮image, 預設如果是jpeg，檔案上傳前會壓縮一把再上傳！  
81.             resize: true,  
82.             auto:true,  
83.             //開啟分片上傳  
84.             chunked: true,  
85.             chunkSize:10*1024*1024,  
86.             accept: {  
87.             //限制上傳檔案為MP4  
88.                 extensions: 'mp4',  
89.                 mimeTypes: 'video/mp4',  
90.             }  
91.         });  
92.         // 當有檔案被新增進佇列的時候  
93.         uploader.on( 'fileQueued', function( file ) {  
94.             $('#item1').empty();  
95.             $('#item1').html('<divid="' + file.id + '"class="item">'+  
96.                 '<aclass="upbtn"id="btn"onclick="stop()">[取消上傳]</a>'+  
97.                 '<pclass="info">' + file.name + '</p>' +  
98.                 '<pclass="state">等待上傳...</p></div>'  
99.             );  
100.         });  
101.         // 檔案上傳過程中建立進度條實時顯示。  
102.         uploader.on( 'uploadProgress', function( file, percentage ) {  
103.             $('#item1').find('p.state').text('上傳中 '+Math.round(percentage * 100) + '%');  
104.         });  
105.         uploader.on( 'upl