我的html文件：Upload.html
<tr ng-repeat="expenses in finalJson.comments">
<td >
<div class="image-upload">
<label for="file-input">
<img src="../images/upload1.jpg" style="width: 20px;"/>{{data.files[0].name}}
</label>
<input id="file-input" type="file" ng-model="expenses.files" ngf-select accept="*" value=""/>
</div>
</td>
</tr>
controller：UploadController
单击上传后,我用它来获取文件名
var json = JSON.stringify($scope.finalJson.comments);
的console.log(JSON);
截图：
当我上传一个文件的工作文件时,当我添加多个文件时,我无法在控制台中获得第二个文件名.任何人都可以建议我,如何在上传点击后立即获取多个文件.
[{
"index": 1,"amount": "10","$$hashKey": "object:5","date": "2016-04-11","Category": "58","note": "wdxw","paid_to": "swdw","files": {
"webkitRelativePath": "","lastModified": 1450934331000,"lastModifiedDate": "2015-12-24T05:18:51.000Z","name": "node-js.pdf","type": "application/pdf","size": 182649
}
},{
"$$hashKey": "object:31","date": "2016-04-05","Category": "60","note": "scds","paid_to": "dsad","amount": "20"
}]
解决方法
在ng-repeat中使用此代码
<div ng-controller = "myCtrl">
<div ng-repeat="fileInput in fileInputs">
<input type="file" file-model="{{'myFile' + $index}}"/>
<button ng-click="uploadFile('myFile' + $index)">upload me</button>
</div>
</div>
控制器代码：
var myApp = angular.module('myApp',[]);
myApp.directive('fileModel',['$parse',function ($parse) {
return {
restrict: 'A',link: function(scope,element,attrs) {
var model,modelSetter;
attrs.$observe('fileModel',function(fileModel){
model = $parse(attrs.fileModel);
modelSetter = model.assign;
});
element.bind('change',function(){
scope.$apply(function(){
modelSetter(scope.$parent,element[0].files[0]);
});
});
}
};
}]);
myApp.service('fileUpload',['$http',function ($http) {
this.uploadFileToUrl = function(file,uploadUrl){
var fd = new FormData();
fd.append('file',file);
$http.post(uploadUrl,fd,{
transformRequest: angular.identity,headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});
}
}]);
myApp.controller('myCtrl',['$scope','fileUpload',function($scope,fileUpload){
$scope.fileInputs = [1,2,3];
$scope.uploadFile = function(filename){
var file = $scope[filename];
console.log('file is ' + JSON.stringify(file));
console.dir(file);
var uploadUrl = "http://httpbin.org/post";
fileUpload.uploadFileToUrl(file,uploadUrl);
};
}]);
