验证客户端AngularJS输入中的图像文件尺寸答案

【问题标题】：Validate the image file dimensions in input on Client side AngularJS验证客户端AngularJS输入中的图像文件尺寸
【发布时间】：2015-09-20 23:03:32
【问题描述】：

我想在将图像上传到客户端本身的服务器之前验证图像尺寸。我尝试为它寻找解决方案，但我可以通过 img.Onload() 找到解决方案，而我并不在寻找它。

我只想让用户从
<input id="selectThumb" name="myImage" type="file" accept="image/*" onchange="angular.element(this).scope().fileName(this)" </input> 中选择图像
选择文件后，只显示名称，如果图像大于 172X152 像素，则应显示一些警报。我不是在预览图像或任何东西。 “fileName(this)”函数给了我图像文件的名称，我无法获得图像的尺寸，因此无法验证它们。 PS，我已经在我的指令中定义了这个函数。

再一次，我想在用户选择文件时显示警报，如果他的文件不符合上传条件，即大于 172X152px。我没有在我的页面上加载图像文件或预览它。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

恐怕您将不得不使用 Image.onLoad。不过不用担心图片不需要在任何地方显示。

例子在这里Getting Image Dimensions using Javascript File API

    var fr = new FileReader;

    fr.onload = function() { // file is loaded
        var img = new Image;

        img.onload = function() {
            //TODO: Add your validation here
            alert(img.width); // image is loaded; sizes are available
        };

        img.src = fr.result; // is the data URL because called with readAsDataURL
    };

    fr.readAsDataURL(this.files[0]); // I'm using a <input type="file"> for demonstrating

【讨论】：