为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕容3067478 2023-03-18 17:51:14
我有将图像上传到远程服务器的功能。上传功能工作正常,但是一旦我在大小验证块中添加上传功能代码块,它就不起作用了。这是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");                    }                }            };        }如果我将该代码块添加到验证块之外,它就可以正常工作。但是只有当尺寸超过该尺寸时,我如何才能限制上传?没有其他验证按钮,我实际上需要在他们选择文件后完成此操作,它应该验证并更改图像并更新远程服务器。有什么办法可以做到这一点?我发现的所有代码始终在验证,然后在另一个按钮上单击它更新到服务器。
查看完整描述

2 回答

?
ibeautiful

TA贡献1993条经验 获得超5个赞

您不需要 FileReader,您可以通过 设置图像的来源window.URL.createObjectURL

我不确定为什么你的代码不起作用,但我重构了这个解决方案

我还添加了一个指令来使用文件输入ng-change;) 这就是 Angular 方式!


查看完整回答
反对 回复 2023-03-18
?
芜湖不芜

TA贡献1796条经验 获得超7个赞

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


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


$('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 变量,因此您可以根据需要验证它们,禁用上传按钮,例如,如果图像大小不符合您的需要等。


查看完整回答
反对 回复 2023-03-18
  • 2 回答
  • 0 关注
  • 83 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信