@H_502_3@
@H_404_4@
我的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" }]@H_404_4@
解决方法
在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); }; }]);@H_404_4@ @H_404_4@
相关文章
AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...