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>
效果:
内附源码
AngularJS封装webupload实现文件夹上传的更多相关文章
- 文件夹上传插件webupload插件
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...
- 文件夹上传控件webupload插件
我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...
- vue文件夹上传组件选哪个好?
一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传:支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输. ...
- Java Web 项目的文件/文件夹上传下载
需求: 支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验: 内网百兆网络上传速度为12MB/S 服务器内存占用低 支持文件夹上传,文件夹中的文件数量达到1万个以上,且包 ...
- js文件夹上传下载组件
核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...
- java文件夹上传下载组件
核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...
- vue文件夹上传源码
一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传:支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输. ...
- php+文件夹上传实例
核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...
- java+http文件夹上传
在web项目中上传文件夹现在已经成为了一个主流的需求.在OA,或者企业ERP系统中都有类似的需求.上传文件夹并且保留层级结构能够对用户行成很好的引导,用户使用起来也更方便.能够提供更高级的应用支撑. ...
随机推荐
- IDEA查看类继承关系及生成类关系图
1.在想要查看的类上按 Ctrl + H -> Diagrams -> Show Diagrams -> Java Class Diagrams -> Show Impleme ...
- laravel代码生成器的记录
在使用laravel5.5时,关于代码生成器还有很多的功能不明白 是么回事,在此先记录下来过程. 1.composer reqiure summerblue/generator --dev php a ...
- Linux 开机、重启和用户登录注销、用户管理
关机&重启命令 shutdown shutdown -h now:表示立即关机 shutdown -h 1:表示1分钟后关机 shutdown -r now:立即重启 halt 就是直接使用, ...
- Mybatis中DAO层接口没有写实现类,Mapper中的方法和DAO接口方法是怎么绑定到一起的,其内部是怎么实现的
其实也就是通过接口名与mapper的id绑定在一起(即相同),通过SQL去写实现类,返回数据.
- ArcGIS自定义工具箱-字段合并
ArcGIS自定义工具箱-字段合并 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:用指定字符合并两个字段 用例:湖南/长沙=>湖南省长沙市 数据源: 使 ...
- P1147连续自然数和-(尺取法)
https://www.luogu.org/problemnew/show/P1147 题意:输入一个n,求连续几个数加起来等于n,输出这几个连续的数的第一个和最后一个.10<=n<=20 ...
- BlockTrain网络
[BlockTrain网络] 1.每个节点都参与全⽹络的路由功能,同时也可能包含其他功能.每个节点都参与验证并传播交易及区块信息,发现并维持与对等节点的连接.在图6-1所⽰的全节点⽤例中,名为“⽹络路 ...
- 工艺CODE
- 解决HighChart开发遇到的2个问题
需求很简单,显示一条24小时的变化曲线 写完代码效果是只有一条直线,连时间轴都没有 第1个错误 Highcharts error #12 当通过要绘制的点超过1000个时就会报这个错,我按分钟计算间 ...
- 错误:libstdc++.so.6: wrong ELF class
1.安装mysql的时候报错缺少GLIBCXX_3.4.15 2.按照网上的下载了libstdc++.so.6.0.17 放到/usr/lib64 下 删除之前的libstdc++.so.6的链接 重 ...