javascript - 如果图片尺寸过大，则阻止上传

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，因此使用该 bool 值来驱动是否发生更改事件继续尝试上传。

我建议将您的上传逻辑移至 Controller 中。

此外，如果您使用 ng-change，您可以缩短对 Controller 方法的引用:

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