<!--系统主页-->
<!DOCTYPE html>
<!--HTML标签的lang属性：用于指定网页的自然语言-->
<html lang="zh-cn" ng-app="papp" ng-controller="pCtrl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!--css文件引入--start-->
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/simple-line-icons.css" rel="stylesheet" />
<link href="css/font-awesome.min.css" rel="stylesheet" />
<!--css文件引入--end-->
<!--自定义css文件引入--start-->
<link href="css/custom/synwork.css" rel="stylesheet" />
<link href="css/custom/app.css" rel="stylesheet" />
<!--自定义css文件引入--end-->
<!--js文件引入--start-->
<script src="js/default/angular1.5.min.js" type="text/javascript"></script>
<script src="js/default/jquery.min.js" type="text/javascript"></script>
<script src="js/default/jquery.autocompleter.js" type="text/javascript"></script>
<script src="js/default/bootstrap.js" type="text/javascript"></script>
<script src="js/layer/layer.js"></script>
<!--js文件引入--end-->
<body>
<div>
<!--文件上传--start-->
<div class="form-group row">
<label class="col-lg-1 control-label">照 片:</label>
<div class="col-lg-1">
<a href='javascript:void(0);' class="file">添加附件
<input type="file" class="file" multiple="multiple" name="files" id="fileInput" onchange='angular.element(this).scope().fileChanged(this)'>
</a>
</div>
<div class="col-lg-1">
<a href="javascript:;" class="file" ng-click="qinkong()">取消附件</a>
</div>
</div>
<!--文件上传--end-->
<br>
<!--显示文件名--start-->
<div class="form-group row">
<label class="col-lg-1 control-label">文件名:</label>
<div class="col-lg-4">
<table>
<tr ng-repeat="it in names" style="height: 10px;">
<td>{{it.name}}</td>
<td> <a ng-click="delFile(it,$index)"><i class="fa fa-window-close"></i></a></td>
</tr>
</table>
</div>
</div>
<!--显示文件名--end-->
<div class="form-group row">
<label class="col-lg-1 control-label">视 频:</label>
<div class="col-lg-1">
<a href='javascript:void(0);' class="file">添加附件
<input type="file" class="file" multiple="multiple" name="files2" id="fileInput" onchange='angular.element(this).scope().fileChanged2(this)'>
</a>
</div>
<div class="col-lg-1">
<a href="javascript:;" class="file" ng-click="qinkong2()">取消附件</a>
</div>
</div>
<div class="form-group row">
<label class="col-lg-1 control-label">文件名:</label>
<div class="col-lg-4">
<table>
<tr ng-repeat="it in names2" style="height: 10px;">
<td>{{it.name}}</td>
<td> <a ng-click="delFile2(it,$index)"><i class="fa fa-window-close"></i></a></td>
</tr>
</table>
</div>
</div>
</div>
<a class="btn btn-success" ng-click="add()">上传</a>
</body>
<script>
var app = angular.module('papp', []);
app.controller('pCtrl',function($scope, $http, $rootScope, $window) {
//定义空数组，存放要上传的文件名
$scope.names = new Array();
$scope.names2 = new Array();
//定义空数组，存放要上传的文件
var fd = new FormData();
//定义空数组，存放要上传的文件，作为间接变量
var fd1=new FormData();
var fd2=new FormData();
//文件数量
$scope.amount=0;
$scope.amount2=0;
//文件key值，文件名id
$scope.index=0;
$scope.index2=0;
/*
* 添加附件--start
*/
$scope.fileChanged = function(ele){
//获取选择的所有文件
var files = document.querySelector('input[name="files"]').files;
for (var i=0; i<files.length; i++) {
//追加文件
fd1.append($scope.index, files[i]);
//追加文件名
$scope.names.push({id:$scope.index, name: files[i].name});
//文件数量加1
$scope.amount=$scope.amount+1;
//key值加1
$scope.index=$scope.index+1
}
//传播model变化
$scope.$apply();
}
$scope.fileChanged2 = function(ele){
//获取选择的所有文件
var files2 = document.querySelector('input[name="files2"]').files;
for (var i=0; i<files2.length; i++) {
//追加文件
fd2.append($scope.index2, files2[i]);
//console.log(fd.get('0'))
//追加文件名
$scope.names2.push({id:$scope.index2, name: files2[i].name});
//文件数量加1
$scope.amount2=$scope.amount+1;
//key值加1
$scope.index2=$scope.index+1
}
//传播model变化
$scope.$apply();
}
/*添加附件--end*/
/*
* 删除单个附件--start
* 参数index：文件名索引
* 参数t:文件名对象
*/
$scope.delFile = function(t,index){
//删除当前文件
fd1.delete(t.id);
//删除当前文件名
$scope.names.splice(index,1);
//文件数量减1
$scope.amount=$scope.amount-1;
}
$scope.delFile2 = function(t,index){
//删除当前文件
fd2.delete(t.id);
//删除当前文件名
$scope.names2.splice(index,1);
//文件数量减1
$scope.amount2=$scope.amount-1;
}
/*删除单个附件--end*/
/*
* 添加函数--start
* 上传数据，传入后台
*/
$scope.add = function(){
//遍历取出剩下的未删除的文件，添加到fd
for(var i=0;i<$scope.names.length;i++){
$scope.id=$scope.names[i].id;
fd.append('files',fd1.get($scope.id));
console.log(fd.get('files'))
}
for(var i=0;i<$scope.names2.length;i++){
$scope.id=$scope.names2[i].id;
fd.append('files2',fd2.get($scope.id));
console.log(fd.get('files2'))
}
//往后台传递添加的数据
$http({
method:'POST',
url : 'http://192.168.100.121:8080/asset/addRepository',
data: fd, //文件
headers: {'Content-Type':undefined},
transformRequest: angular.identity
}).success(function (response) {
//上传成功，提示信息，然后跳转到record.html页面
layer.msg('上传成功', {
time: 1000,
icon: 1
});
fd = new FormData();
}).error(function () {
//上传失败，提示信息
layer.msg('上传失败', {
time: 1000,
icon: 2
});
});
};
/*添加函数--end*/
/*
* 清空文件--start
*/
$scope.qinkong = function() {
$scope.names=[];
$scope.amount=0;
fd1=new FormData();
var file = document.getElementById("fileInput");
if (file.outerHTML) {
file.outerHTML = file.outerHTML;
} else {
file.value = "";
}
};
$scope.qinkong2 = function() {
$scope.names2=[];
$scope.amount2=0;
fd2=new FormData();
var file = document.getElementById("fileInput");
if (file.outerHTML) {
file.outerHTML = file.outerHTML;
} else {
file.value = "";
}
};
/*清空文件--end*/
});
</script>
</html>