jquery - 如何限制图片上传的高度和宽度？

Question

function filePreview (input) {
    if(input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $('#uploadForm + img').remove();
        $('#uploadForm').after('<img src="'+e.target.result+'" width="840" height="600" />');
      }
      reader.readAsDataURL(input.files[0]);
      }
  }

    $('#fileThumbnail').change(function() {
      filePreview(this);
    });

我正在尝试预览图像，但仅接受宽度:840px、高度:600px 不多也不少的图像。并返回错误以选择这些确切尺寸的图像

Answer 1

您可以尝试将文件转换为Image元素在应用之前获取宽度和高度。

我还添加此行 /(image\/)(jpeg|jpg|bmp|gif)/.test(input.files[0].type) 在转换之前检查文件扩展名(仅接受扩展名为 jpef、jpg、bmp 和 gif 的图像)

function filePreview (input) {
        if(input.files && input.files[0] && /(image\/)(jpeg|jpg|bmp|gif)/.test(input.files[0].type)) {
        
          var reader = new FileReader();
          reader.onload = function(e) {
              
              var image = new Image();
              
              image.onload = function () {
                // you can check the image width and height here
                var width = this.width;
                var height = this.height;
                
                if (width === 840 && height === 600) {
                  // code goes here...

                  // $('#uploadForm + img').remove();
                  // $('#uploadForm').after(this);
                }
                
                $('body').append(this);
              };
              
              image.src = this.result;
              
          }
          
          reader.readAsDataURL(input.files[0]);
        }
    }
    
        $('#fileThumbnail').change(function() {
          filePreview(this);
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="file" id="fileThumbnail" />