gpt4 book ai didi

angularjs - 在 ng-repeat 中上传 Angular-js 文件

转载 作者:行者123 更新时间:2023-12-01 04:56:59 25 4
gpt4 key购买 nike

我的 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 :上传 Controller
单击上传后,我已使用它来获取文件名

var json = JSON.stringify($scope.finalJson.comments);
控制台日志(json);

截屏:

enter image description here

当我上传一个文件的工作文件时,当我添加多个文件时,我无法在控制台中获取第二个文件名。任何人都可以建议我,如何在点击上传后一次获取多个文件。
[{
"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 中使用此代码

html代码:

<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>

Controller 代码:
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);
};

}]);

关于angularjs - 在 ng-repeat 中上传 Angular-js 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36469003/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com