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>

效果：









内附源码