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

Posted 2023-05-09

【中文标题】如果图像大小很大，则禁用 angularjs 表单提交按钮

【英文标题】：Disable angularjs form submit button if image size is big

【发布时间】：2017-01-17 01:03:31

【问题描述】：

我有一个表格

<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);
                  
                ;
              
            
          );
        );
      
    ;
  
]);

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

【参考方案1】：

如果按钮被禁用，

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

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

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

【讨论】：

我将 ng-click 更改为 ng-submit。如果方便的话，你能告诉我你在回调中的另一个应用包装是什么意思吗？因此，如果我想在范围上添加一些属性，然后可以在 isBig 等表单字段中使用，这是这样做的方法吗？

【参考方案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>