如果图像大小很大，则禁用 angularjs 表单提交按钮

Question

我有一个表格

<div class="form-group">
  <input type="file" id="files" file-upload="myFile" ng-disabled="isBig" class="form-control" name="files" />
  <output id="list"></output>
</div>
<button type="submit" ng-disabled="isBig" class="btn btn-danger btn-block" ng-click="createUser()">Submit</button>

我有一个将文件绑定到范围的自定义指令，在此指令中，我创建图像对象并在 onload 方法中检查文件大小。如果文件大小大于指定限制，我想取消选择文件，禁用表单提交按钮并提醒用户选择较小尺寸的图像。如果大小更大，我尝试将 onload 方法中的范围属性设置为 true，但它不起作用。

app.directive('fileUpload', ['$parse',
  function($parse) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var model = $parse(attrs.fileUpload);
        var modelSetter = model.assign;
        element.bind('change', function() {
          scope.$apply(function() {
            if (element[0].files.length > 1) {
              modelSetter(scope, element[0].files);
            } else {
              modelSetter(scope, element[0].files[0]);
              var file = element[0].files[0];
              if (file) {
                var img = new Image();

                img.src = window.URL.createObjectURL(file);

                img.onload = function() {
                  var width = img.naturalWidth,
                    height = img.naturalHeight;

                  window.URL.revokeObjectURL(img.src);
                  var isBig = false;

                  if (width <= 200 && height <= 200) {

                    modelSetter(scope, isBig);
                  } else {
                    isBig = true;
                    modelSetter(scope, isBig);
                  }
                };
              }
            }
          });
        });
      }
    };
  }
]);

任何关于我不正确的地方都将不胜感激。

Answer 1

如果按钮被禁用，

ng-click 仍然会触发，因为它是一个单击事件处理程序。 ng-disabled 将停止提交表单，因此请去掉按钮上的 ng-click="createUser()" 并将 ng-submit="createUser()" 放在表单上。

您也可以通过 ng-submit="formName.$valid && createUser()" 对表单字段进行验证，从而使表单无效。

image.onload 函数也会在作用域摘要之外触发，因此您需要另一个应用包装内部回调函数。

Answer 2

我找到了解决方案。阿德里安的意见帮助了我。如果有人需要，我会发布代码。我已将 ng-model 添加到指令中并设置视图值，然后在图像大小符合我们需要的情况下渲染它。也添加所需的表单输入。

//directive to set uploaded img file to the scope element
    app.directive('fileUpload', ['$parse',
      function ($parse) {
        return {
          require: 'ngModel',
          restrict: 'A',
          link: function(scope, element, attrs,ngModel) {
            var model = $parse(attrs.fileUpload);
            var modelSetter = model.assign;

            element.bind('change', function(){

              scope.$apply(function(){
                if (element[0].files.length > 1) {
                  modelSetter(scope, element[0].files);
                }
                else {
                  modelSetter(scope, element[0].files[0]);
                  var file = element[0].files[0];
                  if( file ) {
                    var img = new Image();

                    img.src = window.URL.createObjectURL( file );

                    img.onload = function() {
                      var width = img.naturalWidth,
                      height = img.naturalHeight;

                      window.URL.revokeObjectURL( img.src );


                      if( width <=200 && height <=200 ) {

                        ngModel.$setViewValue(element.val());
                        ngModel.$render();
                      }
                      else {
                        //fail
                      }
                    };
                  }
                  else{
                    ngModel.$setViewValue(element.val());
                        ngModel.$render();
                  }
                }
              });
            });

          }
        };
      }
      ])

这是表单输入：

<form name ="addForm" ng-submit="createUser()" novalidate>

<div class="form-group">
                            <input type="file" id="files" ng-model="filename" required file-upload="myFile" class="form-control" name="files" accept="image/*"/>
                            <output id="list"></output>
                        </div>

                        <!-- Submit button. Note that its tied to createUser() function from addCtrl. Also note ng-disabled logic which prevents early submits.  -->
            <button type="submit" ng-disabled="addForm.$invalid" class="btn btn-danger btn-block">Submit</button>
                    </form>