绑定多个文件输入数据到AngularJS数据模型

Question

HTML浏览：

：

<form> 
     <input type="file" file-input="files" multiple/> 
     <button ng-click="initUpload()">Upload</button> 
</form> 

我已经借了以下指令（绑定多个文件类型的输入）从各种各样的答案我这个网站上找到

module.directive('fileInput', ['$parse', function ($parse) { 
    return { 
     restrict: 'A', 
     link:function(scope, elm, attrs){ 
     var model = $parse(attrs.fileInput); 
     var isMultiple = attrs.multiple; 
     var modelSetter = model.assign; 
     elm.bind('change', function(){ 
      var values =[]; 
      angular.forEach(elm[0].files, function(item){ 
       var value = { 
       name: item.name, 
        type: item.type, 
        _file: item 
       }; 
       values.push(value); 

      }); 

      scope.$apply(function(){ 
       if(isMultiple){ 
        modelSetter(scope, values); 
       } else{ 
        modelSetter(scope, values[0]); 
       } 
      }); 
     }); 
     } 
    } 
}]); 

底线问题是：在控制器中，我将如何访问文件数组？目前我正尝试使用$scope.values[i]访问它们，但这不起作用。

如果我试图找到上传文件的数量，我认为$scope.values.length理想上应该工作？

我在这里错过了什么？

Answer 1

如果您可以使用相同的范围指令。您可以如下所示实现此目的。

app.directive('fileInput', function() { 
    return { 
    scope: false, 
    link: function(scope, element, attr) { 
     element.on('change', function(event) { 
     scope[attr.fileInput] = event.target.files; 
     }); 
    } 
    }; 
}); 

Codepen