Question

我在一个页面中有多个文件输入如下所示

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>

<script>
$(document).ready(function () {
    $("#submit").click(function(event){
        $('#submit').val('Processing …');
        $('SubmitForm').submit();
    });  
  $('form').submit(function(event){
       alert("form submitted");
       $('#submit').val('submitted');
    });
});  
</script>
<form  id="SubmitForm" action="/scripts/t.php" method="POST" enctype="multipart/form-data" accept-charset="utf-8" data-abide >
 <input  type="submit" value="Submit"  id='submit'>

</form>

我的指示如下

<input data-file="cancelledCheque" name="cancelledCheque" type="file"
 class="fileUpload" ng-file-select="onFileSelect($files)" accept=".jpg,.jpeg">

现在我面临的问题是，当单个上传显示错误时，所有输入都显示错误，因为我正在使用类那么我该怎么做才能使用相同的指令

唯一地显示错误

以下是我的范围

App.directive("ngFileSelect", function () {
return {
    link: function ($scope, el) {
        el.on('click', function () {
            this.value = '';
        });
        el.bind("change", function (e) {
            $scope.file = (e.srcElement || e.target).files[0];
            var allowed = ["jpeg", "jpg"];
            var found = false;
            var img;
            $scope.filevaliderror = false;
            img = new Image();
            allowed.forEach(function (extension) {
                if ($scope.file.type.match('' + extension)) {
                    found = true;
                    $('.filevaliderror').css('display', 'none');
                }
            });
            if (!found) {
                //alert('file type should be .jpeg, .jpg');
                $('.filevaliderror').css('display', 'block');
                return;
            }
            img.onload = function () {
                //var dimension = $scope.selectedImageOption.split(" ");
                //if (dimension[0] == this.width && dimension[2] == this.height) {
                    allowed.forEach(function (extension) {
                        if ($scope.file.type.match('' + extension)) {
                            found = true;
                            $('.filevaliderror').css('display', 'none');
                        }
                    });
                    if (found) {
                        if ($scope.file.size <= 4194304) {
                            $scope.getFile();
                            $('.filevaliderror').css('display', 'none');
                        } else {
                            //alert('file size should not be greater then 4 Mb.');
                            //$scope.file.value = "";
                            //$scope.filevaliderror = true;
                            $('.filevaliderror').css('display', 'block');
                        }
                    } else {
                        //alert('file type should be .jpeg, .jpg,');
                        //$scope.filevaliderror = true;
                        $('.filevaliderror').css('display', 'block');
                    }
                //} else {
                //    alert('selected image dimension is not equal to size drop down.');
                //}
            };
            img.src = URL.createObjectURL($scope.file);
        });
    }
};

Answer 1

    <span class="filevaliderror" style="padding-top:4px; 
         color:#af0e0e" ng-if="submitted && 
             form.cancelledCheque.$error.cancelledCheque">Upload a valid File Error</span>
    <span ng-if="submitted && form.cancelledCheque.$error.required">required</span>

您可以将某些内容更改为上方，以便仅将错误显示给特定字段。

Answer 2

很难操纵错误元素，因为它超出了指令的标记。让你的指令同时包装file input和error block：

<div ng-select-file>
  <input type="file"/>
  <span ng-show="error">{{error}}"</span>
</div>

然后通过更改范围的error属性来显示或隐藏错误：

link: function ($scope, el) {
  el.find('input').bind('change', function (e) {
    var file = (e.srcElement || e.target).files[0];
    $scope.error = '';

    // validate input and show errors...
    var isValid = false;

    if (!isValid) {
        $timeout(function(){
            $scope.error = 'Wrong file type';
        });
    }
  });
}

这是这样做的有条理的方式。

这是工作基本样本：https://jsfiddle.net/aleckravets/awuLh6gu/

如何使用单个AngularJS指令显示多个文件输入的错误消息

2 个答案: