AngularJS封裝webupload實現文件夾上傳

百度的webupload沒有開放api獲取整個文件夾的信息。本文是二次開發webupload實現獲取文件夾信息。 

指令封裝 

/**

 * @license lx.ui.framework v1.0.0

 * (c) 2017-2018 lx, Inc.n

 * @author lx

 */

(function(window, undefined ) { 'use strict';

          //設置lx.ui.upload的配置信息

          var $$runtime = {file:'/api/1.0/upload/add', "swf":"",debug : true};

 

          var lxUiUpload=angular.module("lx.ui.upload",[]);

         

/**

 * 在lx.ui.framework上聲明lx-ui-upload指令

 *

 */

lxUiUpload.directive('lxUiUpload',function($lx){

          var option = {

                    restrict : 'E',

                    replace : true,

                    template : '<div>上傳文件</div>',

                    scope:true,

                    link : function($scope, $element, $attrs) {

                    //聲明做用域內上傳數據對象

          $scope.upload={"id":"","droparea":"","md5":"","length":0,"data":[],"tip":true,"isupload":false,"progress":[],"isprogress":true,"total":0};

                    //設置上傳文件id

                    $scope.upload.id="#"+$attrs.id;

                    $scope.upload.droparea="."+$attrs.droparea;

                    WebUploader.Uploader.register({

                               "before-send-file" : "beforeSendFile"

                    }, {

                               // 時間點1：全部分塊進行上傳以前調用此函數

                               beforeSendFile : function(file) {

                                         var deferred = WebUploader.Deferred();

                                         // 1、使用md5計算文件的惟一標記，用於斷點續傳

                                         uploader.md5File(file).then(function(val) {

                                                   $scope.upload.md5= val;

                                                   // 2.1.5延遲解決

                                                   deferred.resolve();

                                         });

                                         return deferred.promise();

                               },

                    });

                    var uploader = WebUploader.create({

                               // swf文件路徑

                               swf : $$runtime.swf,

                               // 文件接收服務端。

                               server : $$runtime.file,

                               // 選擇文件的按鈕。可選。

                               // 內部根據當前運行是建立，多是input元素，也多是flash.

                               pick : {

                                         id : $scope.upload.id,

                                         // 這個id是你要點擊上傳文件的id，本身設置就好</span>

                                         multiple : true

                               },

                               // 不壓縮image, 默認若是是jpeg，文件上傳前會壓縮一把再上傳！

                               resize : true,

                               dnd:$scope.upload.droparea,

                               auto : true,

                               // 上傳併發數

                               threads : 5,

                               // 開啓分片上傳

                               chunked : true,

                               chunkSize : 1 * 1024 * 1024,

            duplicate :true 

                    });

                    // 聲明WebUploader內【uploadBeforeSend】事件

                    $scope.$on("isupl",function(event,node){

                               if(node===1){

                                         $scope.upload.isupload=true;

                               }else{

                                         $scope.upload.isupload=false;

                               }

                    });

                    uploader.on("beforeFileQueued", function(file) {

//                             if(!$scope.upload.isupload){

//                                       alert("您好：你沒得在該文件夾下上傳文件的權限！",1);

//                                       return false;

//                             }

                    });

                    // 聲明WebUploader內【uploadBeforeSend】事件

                    uploader.on("fileQueued", function(file, data) {

                               if($scope.upload.length==0){

                                         //清空文件進度條

                                         $scope.upload.progress=[];

                                         $scope.upload.total=0;

                                         $lx.show("","/upload/upload/templates/progress.html","lx_progress_ctrl","lg",$scope);

                               }

                              $scope.upload.progress.push({id:file.id,size:file.size,name:file.name,type:file.type,percentage:"0"+'%'});

                               $scope.upload.length++;

                               // wenbuploader添加攜帶參數

                    });

                    // 聲明WebUploader內【uploadBeforeSend】事件

                    uploader.on("uploadBeforeSend", function(block, data) {

                               // wenbuploader添加攜帶參數

                               data.fileMd5 = $scope.upload.md5;

                    });

                    // 聲明WebUploader內【uploadProgress】事件

                    uploader.on( 'uploadProgress', function(file, percentage ) {

                               angular.forEach($scope.upload.progress,function(v){

                                         if(v.id==file.id){

                                                   v.percentage=Math.round(percentage * 100) + '%';

                                         }

                               });

                        $scope.$apply();

                    });

                    // 聲明WebUploader內【拼裝文件地址】事件,實現獲取文件夾和文件的邏輯

                    function assemblepath(folders,files){

                              //循環folders

                               //console.log(angular.toJson(folders.folders));

                               angular.forEach(folders.folders,function(v){

                                         angular.forEach(v.files,function(f){

                                                   //循環上傳的文件

                                                   angular.forEach(files,function(i,index){

                                                             if(f.name==i.name){

                                                                       f.md5==undefined?"0":f.md5;

                                                                       f.size==undefined?"0":f.size;

                                                                       f.type==undefined?"999":f.type;

                                                                       f.md5=i.md5;

                                                                       f.size=i.size;

                                                                       f.type=i.type;

                                                                       files.splice(index,1);

                                                             }

                                                            

                                                   });

                                         });

                                         assemblepath(v,files);

                               });

                    }

                    // 聲明WebUploader內【uploadSuccess】事件

                    uploader.on("uploadSuccess", function(file, response) {

                              

                               $scope.upload.total++;

                               $scope.upload.data.push(response[0]);

                               $scope.upload.length--;

                               if($scope.upload.length==0){

                                         var isdrop=false;

                                         //判斷拖拽仍是選擇文件上傳

                                         var file={};

                                         try{

                                                   file=angular.fromJson(localStorage.getItem("file"));

//獲取到的文件夾和文件信息

                                                   alert(angular.toJson(file))

                                                   if(file==""||file==null){

                                                             file={};

                                                             isdrop=false;

                                                   }else{

                                                             isdrop=true;

                                                   };

                                         }catch(e){

                                        

                                         }

                                         //若是是拖拽

                                         if(isdrop){

                                                   try{

                                                             angular.forEach(file.files,function(f){

                                                                       angular.forEach($scope.upload.data,function(i,index){

                                                                                  if(f.name==i.name){

                                                                                            debugger;

                                                                                            f.md5==undefined?"0":f.md5;

                                                                                            f.size==undefined?"0":f.size;

                                                                                            f.type==undefined?"999":f.type;

                                                                                            f.md5=i.md5;

                                                                                            f.size=i.size;

                                                                                            f.type=i.type;

                                                                                            $scope.upload.data.splice(index,1);

                                                                                  }

                                                                       });

                                                             });

                                                             assemblepath(file, $scope.upload.data);

                                                   }catch(e){

                                                            

                                                   }

                                         }else{

                                                   file.files=[];

                                                   file.files=$scope.upload.data;

                                         }

                                         $scope.$emit('upload', file); 

                                         $scope.upload.data=[];                                                

                                         $util.set("file","");

                                         file={};

                                         isdrop=false;

                                                   }

                                         });

                               }

                    };

                   

                    return option;

          });

})();

使用： 

<lx-ui-upload droparea="lx-ui-panel" id="upload" type="button" class="lx-ui-button orange r" value="上傳文件" style="width:80px;"></lx-ui-upload>

效果： 

 

DEMO下載地址：https://dwz.cn/fgXtRtnu