我有一种情况,我有一个表单,我有一行,我有两个文本字段条目,我必须上传该行的文件,这种行可以是’N’,然后在那里是一个主文件,可以输入整个表单,而这些是表单的一部分,我必须一次提交所有这些文件点击保存按钮。
我很难忍受ng-upload,需要一个api调用,我真的不能有多个api调用这个表单。
示例HTML代码是here。
<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>
这里是文件值绑定指令的例子..
原文链接:https://www.f2er.com/angularjs/144442.htmlhttp://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]); } }); }); } }; }]);
<!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>