多文件上传，页面与js中做法 angularjs

<div ng-controler="custemerListMainCtroller">
<div class="col-md-12">
<label for="file" class="btn btn-primary">选择文件</label>
<input type="file" id="file" style="display: none" file-upload multiple/><br/>
<div ng-show="files.length > 0">
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>序号</th>
<th>文件名</th>
<th>文件大小</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="file in files">
<td>{{$index+1}}</td>
<td>{{file.name}}</td>
<td>{{file.size/1024/1024|number:2 }} MB</td>
<td><button class="btn btn-danger btn-xs" ng-click="removeFile(file)">删除</button></td>
</tr>
</tbody>
</table>
<button ng-click="uploadFiles(files)">上传所有文件</button>
</div>
<br/><br/><br/>

<div ng-hide="result">
<p><span style="color:red;" >{{data.resultMsg}}</span></p>
<div ng-hide="visible">
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th colspan="4" style="color:red;" >{{mes}}</th>
</tr>
</thead>
<thead>
<tr>
<th>row</th>
<th>cel</th>
<th>titleName</th>
<th>error</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="map in data.resultData.errorList">
<td>{{map.row}}</td>
<td>{{map.cel}}</td>
<td>{{map.title}}</td>
<td>{{map.reson}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

 

js中

myApp.directive('fileUpload',
['$http',function($http) {
return {
restrict : 'EA',
link : function(scope, el, attrs) {
scope.init = function() {
if (scope.files == null) {
scope.files = new Array();
}
};

scope.pushFile = function(file) {
var flag = true;
scope.init();
if (scope.files.length > 0) {
for (var i = 0; i < scope.files.length; i++) {
if (scope.files[i].name == file.name
&& scope.files[i].size == file.size) {
flag = false;
}
}
}
if (flag) {
scope.files.push(file);
}
};

scope.removeFile = function(file) {
if (scope.files != null
&& scope.files.length > 0) {
for (var i = 0; i < scope.files.length; i++) {
alert("name"+file.name)
alert("path"+file.path)
if (scope.files[i].name == file.name&& scope.files[i].size == file.size) {
scope.files.splice(i, 1);
document.getElementById("file").value = "";
}
}
}
};

scope.uploadFiles = function(files) {
var flg="0";
var ids = {};
ids.flag = "0";
ids.masterDate = "nike";
$http(
{
method : 'POST',
url : "custemerList/uploadCustList",
headers : {
'Content-Type' : undefined
},
data : {
flag : "0",
masterDate: "nike",
files : scope.files
},
transformRequest : function(data) {
var formData = new FormData();
formData.append("flag",angular.toJson(data.flag));
formData.append("masterDate",angular.toJson(data.masterDate));
for (var i = 0; i < data.files.length; i++) {
formData.append("myfiles",data.files[i]);
}
return formData;
}
})
.success(function(data, status,headers, config) {
console.log("success.status"+status+"..headers:"+headers+"..data:"+data.resultCode);
alert("success.status"+status+"..headers:"+headers+"..data:"+data.resultCode)
flg=data.resultData.flag;
if(flg=="1"){
//错误数据显示
scope.visible=false;
scope.result=false;
scope.mes="Excel content is wrong, please upload again after modification";
}
scope.data=data;
}).error(function(data, status,headers, config) {
console.log("failed.status"+status+"..headers:"+headers+"..data:"+data.resultCode);
alert("failed.status"+status+"..headers:"+headers+"..data:"+data.resultCode);
})
};

el.bind('change', function(event) {
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
scope.pushFile(files[i]);
scope.$apply();
}
});
}
};
} ]);