java使用WebUploader做大檔案的分塊和斷點續傳
阿新 • • 發佈:2019-01-24
前言:
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部分程式碼:
- <scripttype="text/javascript">
- var fileMd5;
-
//監聽分塊上傳過程中的三個時間點
- WebUploader.Uploader.register({
- "before-send-file":"beforeSendFile",
- "before-send":"beforeSend",
- "after-send-file":"afterSendFile",
- },{
- //時間點1:所有分塊進行上傳之前呼叫此函式
- beforeSendFile:function(file){
-
var deferred
- //1、計算檔案的唯一標記,用於斷點續傳
- (new WebUploader.Uploader()).md5File(file,0,10*1024*1024)
- .progress(function(percentage){
- $('#item1').find("p.state").text("正在讀取檔案資訊...");
- })
- .then(function(val){
- fileMd5=val;
- $('#item1').find("p.state").text("成功獲取檔案資訊...");
- //獲取檔案資訊後進入下一步
- deferred.resolve();
- });
- return deferred.promise();
- },
- //時間點2:如果有分塊上傳,則每個分塊上傳之前呼叫此函式
- beforeSend:function(block){
- var deferred = WebUploader.Deferred();
- $.ajax({
- type:"POST",
- url:"<%=basePath%>Video?action=checkChunk",
- data:{
- //檔案唯一標記
- fileMd5:fileMd5,
- //當前分塊下標
- chunk:block.chunk,
- //當前分塊大小
- chunkSize:block.end-block.start
- },
- dataType:"json",
- success:function(response){
- if(response.ifExist){
- //分塊存在,跳過
- deferred.reject();
- }else{
- //分塊不存在或不完整,重新發送該分塊內容
- deferred.resolve();
- }
- }
- });
- this.owner.options.formData.fileMd5 = fileMd5;
- deferred.resolve();
- return deferred.promise();
- },
- //時間點3:所有分塊上傳成功後呼叫此函式
- afterSendFile:function(){
- //如果分塊上傳成功,則通知後臺合併分塊
- $.ajax({
- type:"POST",
- url:"<%=basePath%>Video?action=mergeChunks",
- data:{
- fileMd5:fileMd5,
- },
- success:function(response){
- alert("上傳成功");
- var path = "uploads/"+fileMd5+".mp4";
- $("#item1").attr("src",path);
- }
- });
- }
- });
- var uploader = WebUploader.create({
- // swf檔案路徑
- swf: '<%=basePath%>scripts/webuploader-0.1.5/Uploader.swf',
- // 檔案接收服務端。
- server: '<%=basePath%>UploadVideo',
- // 選擇檔案的按鈕。可選。
- // 內部根據當前執行是建立,可能是input元素,也可能是flash.
- pick: {id: '#add_video', <spanstyle="background-color: rgb(255, 204, 0);">//這個id是你要點選上傳檔案的id,自己設定就好</span>
- multiple:false},
- // 不壓縮image, 預設如果是jpeg,檔案上傳前會壓縮一把再上傳!
- resize: true,
- auto:true,
- //開啟分片上傳
- chunked: true,
- chunkSize:10*1024*1024,
- accept: {
- //限制上傳檔案為MP4
- extensions: 'mp4',
- mimeTypes: 'video/mp4',
- }
- });
- // 當有檔案被新增進佇列的時候
- uploader.on( 'fileQueued', function( file ) {
- $('#item1').empty();
- $('#item1').html('<divid="' + file.id + '"class="item">'+
- '<aclass="upbtn"id="btn"onclick="stop()">[取消上傳]</a>'+
- '<pclass="info">' + file.name + '</p>' +
- '<pclass="state">等待上傳...</p></div>'
- );
- });
- // 檔案上傳過程中建立進度條實時顯示。
- uploader.on( 'uploadProgress', function( file, percentage ) {
- $('#item1').find('p.state').text('上傳中 '+Math.round(percentage * 100) + '%');
- });
- uploader.on( 'upl