# Angular项目上传文件
# 方式一:使用angualar自带的angular-file-upload插件
index.html页面引入
<script src="assets/global/plugins/angularjs/plugins/angular-file-upload/angular-file-upload.min.js"></script>
1
<div class="tab-pane" data-ng-class="{'active':count=='count_unusual'}"
data-ng-show="count=='count_unusual'">
<label class="ui-upload btn btn_shadow blue pull-left" style="width: auto;height: auto;margin-bottom: 20px">
<img src="images/icon-download.png" style="display: none" class="padding-top-5 padding-btoom-5">
<p class="margin-bottom-0 page-total" style="color: #fff">{{data.uploadReport}}</p>
<p class="margin-bottom-0 font-red upload-text-p" style="display: none">{{data.fileSizeLimet}}</p>
<input class="margin-top-6" type="file" nv-file-select="" uploader="uploader" multiple style="display: none;">
</label>
<div class="unusualContent" style="width: 100%;">
<div style="width: 100%;height: 40px;background-color:#efefef;
display: flex;justify-content: space-between;align-items: center">
<div style="width: 60%;text-align: left;text-indent: 20px">{{data.reportName}}</div>
<div style="width: 20%;text-align: left;text-indent: 20px">{{data.uploadTime}}</div>
<div style="width: 20%">{{data.operation}}</div>
</div>
<div class="file-lists-item"
data-ng-repeat="att in attachmentList track by $index"
ng-class="{'table-background':$index%2===0}">
<div style="width: 60%;text-align: left">{{att.realName}}</div>
<div style="width: 20%;text-align: left">{{att.createTime | date:'yyyy-MM-dd HH:mm'}}</div>
<div style="width: 20%">
<a style="padding-left: 10px;padding-right: 10px;"
class="mine-btn mine-btn-green"
ng-click="downUnusualList(att)">{{data.download}}</a><!--下载-->
<a style="padding-left: 10px;padding-right: 10px;"
class="mine-btn mine-btn-green"
ng-click="deleteUnusualList(att)">{{data.delete}}</a><!--删除-->
</div>
</div>
</div>
<div data-ng-if="true" class="container-fluid"
data-ng-show="count=='count_unusual'">
<div data-ng-class="paginationConfUnusual.totalItems <= 0?'row pull-left' :'row pull-right'">
<tm-pagination conf="paginationConfUnusual"></tm-pagination>
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
SystecApp.controller('conference_reportController', ['$rootScope', '$scope', 'settings', 'logger', '$filter', 'CdrService', 'MeetingService', 'UmeetingService', '$state', '$stateParams', 'OrgService', 'MeetingTagService', 'MeetingReserveFactory', 'baseUrl', 'MeetingReserve', 'VidoOrlocal', '$timeout', 'UserService', 'AttendeeService', 'MeetingStatisticsService','FileUploader','DeployService',
function ($rootScope, $scope, settings, logger, $filter, CdrService, MeetingService, UmeetingService, $state, $stateParams, OrgService, MeetingTagService, MeetingReserveFactory, baseUrl, MeetingReserve, VidoOrlocal, $timeout, UserService, AttendeeService, MeetingStatisticsService,FileUploader,DeployService) {
$scope.$on('$viewContentLoaded',
function () {
ComponentsPickers.init();
});
// init
$scope.init = function () {
$scope.uploadMaterial();
$scope.getUnusualList();
};
$scope.getUnusualList = function () {
DeployService.tclGetUnusualList({},function (data) {
// console.log(data)
if (data.message === 'OK' && data.status === 200) {
$scope.attachmentList = []
//console.log(data.data)
var chunkArr = []
$scope.paginationConfUnusual.totalItems = data.data.length;
$scope.allAattachmentList = data.data
if(data.data.length > 10) {
chunkArr = chunk(data.data,$scope.paginationConfUnusual.itemsPerPage)
//console.log(chunkArr)
//console.log($scope.paginationConfUnusual.currentPage)
$scope.attachmentList = chunkArr[$scope.paginationConfUnusual.currentPage - 1]
} else {
$scope.attachmentList = data.data
}
console.log('$scope.attachmentList', $scope.attachmentList)
// logger.logSuccess(data.message)
} else {
logger.logError(data.message)
}
})
}
$scope.downUnusualList = function (att) {
MeetingReserveFactory.getDownloadOrExport(baseUrl.getUrl("attachment/download" + "?id=" + att.id));
/*DeployService.tclDownUnusualList({id: att.id},function (data) {
// console.log(data)
if (data.message === 'OK' && data.status === 200) {
console.log(data.data)
logger.logSuccess(data.message)
} else {
logger.logError(data.message)
}
})*/
}
$scope.deleteUnusualList = function (att) {
var indexModal = layer.confirm($rootScope.data.determineToDelete, {
btn: [$rootScope.data.confirm, $rootScope.data.cancel],
title: [$rootScope.data.hint, 'font-size:18px;']//按钮
}, function () {
DeployService.tclDeleteUnusualList({id: att.id},function (data) {
// console.log(data)
if (data.message === 'OK' && data.status === 200) {
// console.log(data.data)
$scope.getUnusualList()
logger.logSuccess($rootScope.data.deleteSuccess)
} else {
logger.logError(data.message)
}
})
/* UmeetingService.deleteMeeting({uuid: meeting.uuid}, {}, function (data) {
if (data.status == 200) {
$scope.loadingDelete_box = true;
logger.logSuccess($rootScope.data.conferenceDeletionSuccessful);
$scope.queryMeetings();
$scope.calendar.fullCalendar('refetchEvents');
// var paramit = { "pageSize":$scope.paginationConf.itemsPerPage,"pageNo":$scope.paginationConf.currentPage, "userId":$scope.loginUserInfo.id } ;
// meetingsWS.send(angular.toJson(paramit, true));
} else {
$scope.loadingDelete_box = false;
logger.logError(data.message);
}
});*/
layer.close(indexModal);
}, function () {
console.log('cancel');
});
}
// 上传会议材料
$scope.uploadMaterial = function (data) {
/* 实例化一个FileUploader对象 */
$scope.uploader = new FileUploader({
autoUpload: true,
/*以下是设置了两个必须的属性*/
url: baseUrl.getUrl('attachment/upload'),
queue: []
// queueLimit: 5
});
$scope.uploader.filters.push({
name: 'limitUpload',
fn: function(item) {
// item就是你上传的文件这里面你就可以写你需要筛选的条件,下面举一个例子,筛选文件的大小
console.log(item)
const isExceed = item.size / 1024 / 1024 < 100;
if (!isExceed) {
logger.logError($rootScope.data.fileSizeLimet);
}
return isExceed ;
}
})
$scope.uploader.onAfterAddingFile = function(fileItem) {
fileItem.file.size = $scope.getFileSize(fileItem.file.size)
}
$scope.uploader.onBeforeUploadItem = function (fileItem, response, status) {
console.log(fileItem)
$scope.uploadSuccess = false;
},
$scope.uploader.onSuccessItem = function (fileItem, response, status) {
console.log(response)
if (response.status == 200 && response.message === 'OK') {
$scope.uploadSuccess = true;
//fileItem.id = response.data.id;
fileItem.isSuccess = true;
// fileItem.type = response.data.type;
//$scope.attachmentIds[response.data.id] = response.data.id;
// $scope.getMaterialId($scope.attachmentIds);
// $scope.attachmentList.push(response.data)
$scope.getUnusualList()
logger.logSuccess($rootScope.data.uploadReportSuccess)
console.log($scope.attachmentList)
// console.log($scope.meeting.attachmentList)
} else {
/* $scope.uploader.queue.forEach(function (val, idx) {
$scope.uploader.queue.splice(1,idx);
});*/
fileItem.isSuccess = false;
logger.logError(response.message);
}
};
$scope.uploader.onErrorItem = function (fileItem, response, status, headers) {
logger.logError($rootScope.data.fileUploadFailed);
$scope.uploadSuccess = true;
};
};
$scope.getFileSize = function (fileByte) {
var fileSizeByte = fileByte;
var fileSizeMsg = "";
if (fileSizeByte < 1048576) fileSizeMsg = (fileSizeByte / 1024).toFixed(2) + "K";
else if (fileSizeByte == 1048576) fileSizeMsg = "1M";
else if (fileSizeByte > 1048576 && fileSizeByte < 1073741824) fileSizeMsg = (fileSizeByte / (1024 * 1024)).toFixed(2) + "M";
else if (fileSizeByte > 1048576 && fileSizeByte == 1073741824) fileSizeMsg = "1G";
else if (fileSizeByte > 1073741824 && fileSizeByte < 1099511627776) fileSizeMsg = (fileSizeByte / (1024 * 1024 * 1024)).toFixed(2) + "G";
else fileSizeMsg = "文件超过1TB";
return fileSizeMsg;
}
// 生成材料id
$scope.getMaterialId = function (materialObj) {
var materialIdArr = [];
for (var key in materialObj) {
materialIdArr.push(materialObj[key]); //属性
}
$scope.meeting.attachmentIds = materialIdArr.join(',');
console.log($scope.meeting.attachmentIds)
};
// 删除材料
$scope.deleteMaterial = function (index, item, num) {
if (num == 0) {
$scope.uploader.queue.splice(index, 1);
} else {
$scope.uploaderData.splice(index, 1);
$scope.attachmentList.splice(index, 1);
}
delete $scope.attachmentIds[item.id];
$scope.getMaterialId($scope.attachmentIds);
};
}]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
# 方式二:使用bootstrap的上传文件插件
<div class="page-bar" data-ng-init="init()">
<ul class="page-breadcrumb">
<li>
<i class="fa fa-home"></i>
<a href="/layout/conference/mine">{{data.index}}</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="javascript:void (0)">{{data.systemManage}}</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="javascript:void (0)">{{data.Document}}</a>
</li>
</ul>
</div>
<div class="portlet light">
<div class="portlet-title">
<!--上传文件-->
<div class="">
<a id="privilegeManageDocAddButton" style="display:none;" href="javascript:;"
class="btn blue btn_shadow pull-left" data-ng-click="openUploadModal()">
<i class="fa fa-plus"></i>{{data.uploadFile}}
</a>
</div>
</div>
<hr class="margin-bottom-5">
<div class="portlet-body">
<div class="row">
<div class="col-lg-12">
<table class="table table-hover table-light">
<thead class="bg-light-grey">
<tr class="uppercase">
<th>{{data.fileName}}</th>
<th>{{data.size}}</th>
<th>{{data.type}}</th>
<th ng-if="hasWritePrivilege">{{data.operation}}</th>
</tr>
</thead>
<tbody>
<tr class="file-lists" data-ng-if="fileList.length !==0" ng-repeat="file in fileList">
<td class="file-name" title="{{file.name}}">
{{file.name}}
</td>
<td class="text_center">{{file.size}}</td>
<td class="text_center">{{file.fileExtension}}</td>
<td ng-if="hasWritePrivilege" class="file-delete text_center" ng-click="deleteFile(file)">删除</td>
</tr>
<tr data-ng-if="fileList.length === 0"><td>暂无数据</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!--上传文件弹窗-->
<div class="modal fade in upload-file-modal" id="upload-file" tabindex="-1" role="dialog" style="margin-top: 90px;">
<div style="width: 540px;" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">{{data.uploadFile1}}</h4>
</div>
<div class="modal-body">
<div class="container-fluid padding-left padding-right">
<form id="upload-file-form" ENCTYPE="multipart/form-data">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="user-edit-image-buttons pull-left">
<span class="btn btn-azure btn-file btn_shadow blue">
<span class="fileinput-new"><i class="fa fa-picture"></i>{{data.selectFile}}</span>
<span class="fileinput-exists"><i class="fa fa-picture"></i>{{data.reselect}}</span>
<input type="file" id="filelayout" name="file">
</span>
</div>
<div class="fileinput-preview fileinput-exists btn_shadow pull-left margin-left-20"></div>
</div>
</form>
</div>
<button class="btn blue upload-file-btn" data-ng-click="uploadFileConfirm()"
data-ng-disabled="isDisabled">{{data.confirm}}</button>
</div>
</div>
</div>
</div>
<style>
body.dragging, body.dragging * {
cursor: move !important;
}
.uppercase th {
text-align: center;
}
.file-lists .file-delete {
color: #3aa2ff !important;
cursor: pointer;
}
.file-lists .file-name {
max-width: 500px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fileinput-preview {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
height: 35px;
max-width: 400px;
line-height: 35px;
color: #ba1f1f;
}
.modal-body .upload-file-btn {
margin-top: 20px;
margin-left: 200px;
width: 70px !important;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
SystecApp.controller(
'manage_documentController',
['$rootScope', '$scope', 'logger', 'baseUrl', 'FileService','PrivilegeService',
function ($rootScope, $scope, logger, baseUrl, FileService, PrivilegeService
) {
$scope.$on('$viewContentLoaded', function () {
$rootScope.settings.layout.pageSidebarClosed = false;
});
$scope.init = function () {
$scope.isDisabled = false; // 默认启用上传按钮
initPrivilige(); // 查询用户写权限
$scope.fileList = [];
queryFiles(); // 查询文件列表
};
//获取用户权限,无写权限时不给操作(页面控制) 0有写权限,1没权限
$scope.hasWritePrivilege = false;
function initPrivilige () {
PrivilegeService.queryRoleAndPrivilegeBySessionId(function (data) {
data.data.forEach(function (val) {
if (val.privilegeId == 20) {
$scope.hasWritePrivilege = val.isWrite === 0;
}
})
})
}
// 获取文件列表
function queryFiles() {
FileService.findFile().$promise
.then(function (res) {
if (res.status === 200) {
$scope.fileList = res.data;
console.log(' $scope.fileList', $scope.fileList.length);
} else {
logger.logError(res.message);
}
});
}
// 打开上传文件弹窗
$scope.openUploadModal = function () {
$('.upload-file-modal').modal('show');
// 清空input的内容
$(".fileinput-preview")[0].innerText = '';
$("#filelayout").attr("value", "");
$("#fileUrllayout").attr("value", "");
};
// 上传文件提交前验证
$scope.uploadFileConfirm = function () {
var filelayoutName = $("#filelayout").val();
var f = document.getElementById("filelayout").files;
// 获取文件名的后缀名
var fileGs = filelayoutName.substring(filelayoutName.lastIndexOf('.') + 1, filelayoutName.length);
// 提示不能为空
if (filelayoutName === '') {
logger.logWarning($rootScope.data.chooseFileTip);
return;
}
// 不能上传超过50m的文件
if (f[0].size > 50 * 1000 * 1000) {
logger.logWarning($rootScope.data.overFileSize);
// 清空文件input框
clearFileInput();
return;
}
// 限制上传文件的后缀名
var validFiles = ['pdf', 'doc', 'docx', 'ppt', 'pptx'];
var isValidFile = validFiles.indexOf(fileGs) > -1;
if (isValidFile) {
// pdf、word、PPT
// 赋值给input框---提交时用
$("#fileUrllayout").attr("value", filelayoutName);
} else {
// 非pdf、word、PPT
logger.logWarning($rootScope.data.enableFileName);
// 清空文件input框
clearFileInput();
return;
}
$scope.isDisabled = true; // 点击上传后,禁用确定按钮
requestUploadFile(baseUrl.getUrl('file/uploadFile'));
};
// 文件提交事件
function requestUploadFile(urlName) {
var url = urlName;
$(function () {
$("#upload-file-form").ajaxSubmit({
type: "post",
processData: false,//processData的默认值是true。用于对data参数进行序列化处理。
url: url,
success: function (res) {
if (res.status == undefined || res.status == null) {
logger.logError($rootScope.data.operatePermission);
return;
}
if (res.status === 200) {
// 成功后隐藏弹出框
$('.upload-file-modal').modal('hide');
logger.logSuccess('上传成功');
$scope.isDisabled = false; // 上传成功后,启用确定按钮
queryFiles();
} else {
logger.logError(res.message);
}
}
});
});
}
// 清空文件input框
function clearFileInput() {
$(".fileinput-preview")[0].innerText = '';
$("#filelayout").attr("value", "");
$("#fileUrllayout").attr("value", "");
}
// 删除文件
$scope.deleteFile = function (file) {
var modalBtn = [$rootScope.data.confirm, $rootScope.data.cancel];
var indexModal = layer.confirm(
'确定删除文件?',
{
btn: modalBtn,
btnAlign: 'c',
title: [$rootScope.data.hint, 'font-size:18px;'] // 按钮
},
function () {
$scope.loading_box = true;
var fileIds = file.id + '';
FileService.deleteFile({fileIds: fileIds}).$promise
.then(function (res) {
$scope.loading_box = false;
if (res.status === 200) {
logger.logSuccess('删除成功');
queryFiles();
} else {
logger.logError(res.message);
}
});
layer.close(indexModal);
},
function () {
console.log('cancel');
}
);
};
}
]
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
SystecApp.factory("FileService", ['$resource','$rootScope','baseUrl',
function($resource,$rootScope,baseUrl){
var base_url = baseUrl.getUrl("file");
return $resource('', {}, {
findFile:{method:"POST",url:base_url+"/findFile"},
uploadFile:{method:"POST",url:base_url+"/uploadFile"},
downloadFile:{method:"POST",url:base_url+"/downloadFile"},
deleteFile:{method:"POST",url:base_url+"/deleteFile"},
});
}
])
;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14