以angular度上传多个文件

我有一个情况,我有一个表格,其中我有两个文本字段条目,我必须上传该行的文件,这种行可以是“N”,然后在那里是一个可以input整个表单的主文件,而这些是表单的一部分,我必须在点击保存button时一次提交所有这些文件。

我有一种坚持ng – 上传它需要一个API调用,我真的不能有一个以上的API调用这种forms。 示例的html代码如下:

<!DOCTYPE html> <html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <form editable-form name="xyzForm" ng-submit="create(model)"> <label>Tags: </label><input class="col-xs-12 col-md-12" ng-model="model.tags" type="text" name="Tags"> <label>Notes: </label> <input class="col-xs-12 col-md-11" ng-model="model.notes" type="text" name="notes"> <table class=" col-xs-3 col-md-11 table" border="1px solid red;"> <thead> <tr> <th>Product</th> <th>Manufacturer</th> <th>Location</th> <th>Specification</th> <th></th> </tr> </thead> <tbody> <tr ng-repeat="itemRow in item.singleItem"> <td><input type="text" class="xdTextBox" name="itemRow.name" ng-model="model.itemRow[$index].name" /></td> <td><input type="text" class="xdTextBox" name="itemRow.manufacturer" ng-model="model.itemRow[$index].manufacturer" /></td> <td><input type="text" class="xdTextBox" name="itemRow.location" ng-model="model.itemRow[$index].location" /></td> <td><i class="pull-left glyphicon glyphicon-upload"><input type="file" name="itemRow.doc" ng-model="model.itemRow[$index].doc" multiple=false></i></td> <td><i class="pull-left glyphicon glyphicon-remove"></i></td> </tr> </tbody> </span> </table> <label>Product Spec: </label><input type="file" ng-model="prefabdoc" multiple="true" ngf-maxsize="15000000" /> </form> </body> </html> 

这里是文件值绑定指令的例子..

http://plnkr.co/edit/B13t84j5IPzINMh1F862?p=preview

Js代码是:

 var app = angular.module('myApp', []); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.files = []; $scope.upload=function(){ alert($scope.files.length+" files selected ... Write your Upload Code"); }; }); app.directive('ngFileModel', ['$parse', function ($parse) { return { restrict: 'A', link: function (scope, element, attrs) { var model = $parse(attrs.ngFileModel); var isMultiple = attrs.multiple; var modelSetter = model.assign; element.bind('change', function () { var values = []; angular.forEach(element[0].files, function (item) { var value = { // File Name name: item.name, //File Size size: item.size, //File URL to view url: URL.createObjectURL(item), // File Input Value _file: item }; values.push(value); }); scope.$apply(function () { if (isMultiple) { modelSetter(scope, values); } else { modelSetter(scope, values[0]); } }); }); } }; }]); 

HTML代码是:

 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link href="style.css" rel="stylesheet" /> <script data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js" data-require="angular.js@1.4.x"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <p>Hello {{name}}!</p> <input type="file" ng-file-model="files" multiple /> <button type="button" ng-click="upload()">Upload</button> <p ng-repeat="file in files"> {{file.name}} </p> </body> </html> 

如果你不关心IE 9以下的浏览器,那么你可以按照这个post在你的ng-submit事件中构build一个FormData对象。 这将创build一个表单/多部分,可能不是你想要的,但它的伎俩。

从上面的saltuk的答案来看 ,代码的工作有一点点改变

  var modelSetter = model.assign; element.bind('change', function () { var values = []; angular.forEach(element[0].files, function (item) { var value = {... } } } 

在forEach函数之前,应该在上面定义数组var

  var modelSetter = model.assign; element.bind('change', function () { var values = []; angular.forEach(element[0].files, function (item) { var value = {... } } }