AngularJS <input [type =“file]”/> ng-model在Firefox / Safari / Chrome中不起作用，但在IE中运行良好

Question

我有一个允许用户选择图像。然后我有应该显示选择图像的位置。它运行良好，但IE浏览器，但涉及到chrome，firefox和safari，绑定到ng-model的属性不会更新。看起来好像3个浏览器在input type = file

中不支持ng-model

.cshtml

<img alt="Cannot load image" class="img-rounded" id="image" ng-src="convertToBase64(data.ImagePath)" style="width: 150px; height: 150px; object-fit: contain;" />
<input accept="image/*" id="chooseImage" type="file" ng-model="data.ImagePath"/>

Answer 1

这并不是你想要的，但这是我用来验证文件输入的defacto指令......可能对你有用。

/*
        validFile
        properly updates the form validation model for input[type=file]

    */
    .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();
            });
          });
        }
      }
    })

Answer 2

我担心输入类型=文件不支持ng-model，但你可以做的是实现一个为你做这个的指令。