单击提交按钮时如何上传多个文件(每个文件最多包含1个文件)? [英] How to upload multiple files(each file contains max 1 file) on clicking on submit button?
问题描述
我正在使用Angularjs和api开发文件上传模块.我正在关注 https://jsfiddle.net/JeJenny/vtqavfhf/.我有一个包含文件名的清单，例如护照，签证等.我将此列表绑定到数组并在ng-repeat中循环.因此，根据文档的数量，它会生成文件上传控件，如下所示.
Hi i am developing file upload module using Angularjs and api. I am following https://jsfiddle.net/JeJenny/vtqavfhf/. I have one list which contains document names such as passport,visa etc and so on. I am binding this list to array and looping inside ng-repeat. So based on the number of documents it generates file upload controls as below.
<div class="upload-button" ng-repeat="file in files">
<div class="upload-button-icon">
<img src="images/folder-small.png">
<div class="upload-text">{{file}}</div>
<input type="file" id="file1" name="file1" file-model="{{file}}" />
</div>
</div>
注意:我们可以一次上传一份文档.很明显，如果我在文件数组中有4个文档，则将生成4个文件上载控件.
Note: we can upload obly one document on one upload. So clearly if i have 4 documents in files array then 4 file upload controls will generate.
最后我有一个按钮，应在单击时保存所有上述文件.
Finally i have one button which should save all the above files on click.
<input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" ng-click="uploadFile(files)">
我有此功能来保存文件(取自提琴手)
I have this function to save file(Taken from fiddler)
$scope.uploadFile = function(filename){
//Here i want to save all the files. For example if there are three documents in array files then 3 documents at a time i want to send it to server.
};
如您所见，小提琴手将具有单独的功能来分别保存每个文件.我正在尝试一次发送所有文件.
As you can see, fiddler will be having separate functions to save each file individually. I am trying to send all the files at a time.
我可以在这里得到一些帮助吗?我不确定$ scope.uploadFile函数应该写什么?我如何在这里收集所有文件数据?谢谢你.
May i get some help here? I am not sure what should be written inside $scope.uploadFile function? How can i collect here all files data? Thank you.
推荐答案
这是一个可行的示例，希望对您有帮助
Here is a working example, hope it helps
var myApp = angular.module('myApp', []);
myApp.directive('fileModel', ['fileUpload', function(fileUpload) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind("change", function(evt) {
fileUpload.pendingFiles[attrs.fileModel] = evt.target.files[0];
});
}
};
}]);
myApp.factory('fileUpload', ['$http', function($http) {
var service = {
uploadUrl: "https://httpbin.org/post",
pendingFiles: [],
doUpload: doUpload
};
return service;
function doUpload() {
var files = new FormData();
angular.forEach(this.pendingFiles, function(value, key) {
files.append('file', value);
});
return $http.post(this.uploadUrl, files, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined
}
})
}
}]);
myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload) {
$scope.fileInputs = [1, 2, 3];
$scope.upload = function(filename) {
fileUpload.doUpload().success(function(success) {
$scope.result = success
});
};
}]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div ng-repeat="fileInput in fileInputs">
<input type="file" file-data="{{fileInput}}" file-model="{{fileInput}}" />
</div>
<br />
<button ng-click="upload()">upload all</button>
<br />
<pre>{{result | json}}</pre>
</div>
</body>这篇关于单击提交按钮时如何上传多个文件(每个文件最多包含1个文件)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
