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();
				// 一、使用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>

效果：




內附源碼