指令封装
/**
* @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 : '上传文件',
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，自己设置就好
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;
});
})();
使用：
效果：
内附源码
- upload_Maven_Webapp.zip (493.6 KB)
- 下载次数: 12
- 查看图片附件