在上传到远程服务器之前检查图像分辨率

Question

我有上传图片到远程服务器的功能。上传功能工作正常，但是一旦我在大小验证块中添加了上传功能代码块，它就不起作用了。 这是html

  <p>
<input type="file" id="BtnBrowseHidden" name="files" style="display: none;" onchange="angular.element(this).scope().SelectFile(event)" />                                         
                                     <label class="btn bluebg " for="BtnBrowseHidden" id="LblBrowse" style="cursor:pointer;">
                                                  Update Image
             
                                     </label>                       
                    </p>

这是验证码

$scope.SelectFile = function (e) {       
        var ext = e.target.files[0].name.split('.').pop();
        var popupImage = angular.element(document.querySelector('#popup__UpdateImpage'));
        popupImage.removeClass('hide');
        popupImage.addClass('hide');
        if (ext == 'png' || ext == 'gif' || ext == 'jpg' || ext == 'jpeg') {
            var reader = new FileReader();
            reader.onload = function (e) {
                var img = new Image();
                img.src = e.target.result;
                img.onload = function () {
                    if (img.height > 150 && img.width > 150) {
                        $scope.PreviewImage = e.target.result;
                        var payload = new FormData();
                        payload.append("file", e.target.files[0]);
                        var res = mainServices.uploadUserImage(payload);
                    }
                    else {
                        alert("File size doesn't support");
                    }
                }
            };
            reader.readAsDataURL(e.target.files[0]);
           
            //var payload = new FormData();
            //payload.append("file", e.target.files[0]);
            //var res = mainServices.uploadUserImage(payload);
            //res.then(function (response) {
            //    //alert("uploaded");
            //    var s = "uploaded";
            //});
        }

如果我将该代码块添加到验证块之外，它可以正常工作。但是只有在大小高于该大小时，我才能限制上传？ 没有其他验证按钮，我实际上需要在他们选择文件后完成此操作，它应该验证并更改图像并更新远程服务器。有什么办法可以做到这一点？我发现的所有代码总是在验证，然后在另一个按钮上单击它会更新到服务器。

Answer 1

你不需要FileReader，你可以通过window.URL.createObjectURL设置图片的来源。

我不确定您的代码为什么不起作用，但我进行了重构并且此解决方案有效： https://jsfiddle.net/1pL4rqe2/

我还添加了一个指令来使用带有ng-change 的文件输入；） 这就是 Angular 的方式！

Answer 2

您应该在选择图像文件时进行验证。

我假设你有一个“文件”元素：

$('input[type="file"]').change(function(e){
let imgfile = new Image()
imgfile.src = window.URL.createObjectURL(e.target.files[0])
imgfile.onload = () => {
   imgWidth = imgfile.width;
   imgHeight = imgfile.height;
}
});

在此之后，您将拥有 imgWidth 和 imgHeight 变量，以便您可以随意验证它们，例如，如果图像大小不符合您的需求等，则禁用上传按钮。