多檔案上傳前端
<!--系統主頁-->
<!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>