angularjs – 以角度上传多个文件

发布时间：2020-12-17 08:11:55 所属栏目：安全来源：网络整理

导读：我有一种情况，我有一个表单，我有一行，我有两个文本字段条目，我必须上传该行的文件，这种行可以是’N’，然后在那里是一个主文件，可以输入整个表单，而这些是表单的一部分，我必须一次提交所有这些文件点击保存按钮。我很难忍受ng-upload，需要一个api

我有一种情况，我有一个表单，我有一行，我有两个文本字段条目，我必须上传该行的文件，这种行可以是’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>

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

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!