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方法中的scope属性设置为true，如果size更大但它不起作用。

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＆amp;＆amp; 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>

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

2 个答案: