Javascript 如何在angularjs中使用输入[type=file]验证表单

HTML:

选择“文件”后，控制台中将出现以下错误：

错误：InvalidStateError:DOM异常11错误：进行了尝试 使用不可用或不再可用的对象

尝试使用plunkr：

如果没有该指令，输入文件字段的状态将无法转换为表单。$valid。您知道我为什么会出现此错误以及如何修复此错误吗？

参考

需要更新视图时调用预计 ng模型指令的用户将实施此方法。

您需要实现$render（）来调用它。你可以这样做

myApp.directive('validFile',function(){
    return {
        require:'ngModel',
        link:function(scope,el,attrs,ngModel){

            //change event is fired when file is selected
            el.bind('change',function(){
                 scope.$apply(function(){
                     ngModel.$setViewValue(el.val());
                     ngModel.$render();
                 });
            });
        }
    };
});

---

更新到AngularJS 1.2.x后，代码段看起来不再正常工作，文件输入不符合所选文件值，使表单无法使用。 将指令更改回原始指令，并删除

ngModel.$render（）

它看起来像一个符咒：

myApp.directive('validFile', function () {
    return {
        require: 'ngModel',
        link: function (scope, el, attrs, ngModel) {
            ngModel.$render = function () {
                ngModel.$setViewValue(el.val());
            };

            el.bind('change', function () {
                scope.$apply(function () {
                    ngModel.$render();
                });
            });
        }
    };
});

---

是否可以在渲染器中获取文件大小？e、 要检查所选文件的mimetype或大小。。。

myApp.directive('validFile', function () {
    return {
        require: 'ngModel',
        link: function (scope, el, attrs, ngModel) {
            ngModel.$render = function () {
                ngModel.$setViewValue(el.val());
            };

            el.bind('change', function () {
                scope.$apply(function () {
                    ngModel.$render();
                });
            });
        }
    };
});

.directive('validFile', function () {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function (scope, el, attrs, ngModel) {
      el.bind('change', function () {
        scope.$apply(function () {
          ngModel.$setViewValue(el.val());
        });
      });
    }
  };