Question

如果超过设定的尺寸，我需要阻止图片上传，我的错误有效并显示图片是否超出设置尺寸但图片仍然上传。我正在使用angular-base64-upload。

我不知道为什么图像仍然会显示出来时，任何想法为什么？

感谢

HTML

<div ng-controller="UpLoadImage">

<div ng-repeat="step in stepsModel">
    <img class="thumb" ng-src="{{step}}"/>
</div>

<label for="file">Add Creative</label>

<form name="form">
    <input type='file' ng-model='files' name='files' multiple accept='image/*, .zip' maxsize='50' onload='onLoad'
           ng-model-instant onchange='angular.element(this).scope().imageUpload(this)' required
           base-sixty-four-input>
    <span ng-show='form.files.$error.maxsize'>Files must not exceed 50 KB</span>
</form>

App.js

angular.module('myApp', ['naif.base64'])
.controller('UpLoadImage', function ($scope, $http, $window, $rootScope) {

    $scope.imageUpload = function (element) {
        var reader = new FileReader();
        reader.onload = $scope.imageIsLoaded;
        reader.readAsDataURL(element.files[0]);
    };

    $scope.imageIsLoaded = function (e) {
        $scope.$apply(function () {
            $scope.stepsModel.push(e.target.result);
        });

        $scope.onLoad = function (e, reader, file, fileList, fileOjects, fileObj) {
            alert('image uploaded');
        };
    };

    $scope.stepsModel = [];
})

Answer 1

您的input正在侦听onchange事件以进行上传 - 没有任何事情可以防止此更改事件继续进行。

form.files.$error.maxsize将返回true或false，因此请使用该布尔值来驱动更改事件是否继续上传尝试。

我建议您将上传逻辑移动到控制器中。

此外，如果您使用ng-change，则可以缩短对控制器方法的引用：

ng-change="imageUpload(this, form.files.$error.maxsize)"

如果您展开imageUpload方法以获取第二个参数，则可以检查图像是否太大而无法继续：

$scope.imageUpload = function (element, maxSizeError) {

    if(maxSizeError) { 
        // handle error logic
     } else {
        var reader = new FileReader();
        reader.onload = $scope.imageIsLoaded;
        reader.readAsDataURL(element.files[0]);
     }
};

如果超大则阻止图片上传

1 个答案: