How to validate the size and format of an image imported by the tag?

Question

How to validate the size and format of an image imported by the <Asp:FileUpload> tag?

I've tried using the code below, but it only checks if it's a valid image, but I do not know how to do those validations.

<div id="img2" style="width: 530px; height: 270px; border: 2px solid rgb(225, 226, 233); box-shadow: rgb(246, 246, 249) 0px 0px 5px inset; background-color: rgba(251, 235, 235, 0.4);">
  <asp:Image ID="imgBanner" runat="server" ImageUrl="~/" Style="border-width: 0px; position: inherit; min-height: 130px; min-width: 130px; top: 20px; bottom: 0; left: 0; right: 0; margin: auto; max-width: 130px; max-height: 130px;" />
</div>

<asp:FileUpload ID="fileUpload" runat="server" />

<script>    
  $("#<%=fileUpload.ClientID%>").on('change', function () {
    if (this.files[0].type.indexOf("image") > -1) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $('#<%=imgBanner.ClientID%>').attr('src', e.target.result);
      }
      reader.readAsDataURL(this.files[0]);
    } else {
      $('#<%=imgBanner.ClientID%>').attr('src', '');
      criarDivAlert('Não é uma imagem válida')
    }
  });
</script>

You can use `this.files[0].size` to get the file size in bytes and validate that before you allow the upload — Rory McCrossan, Feb 21 '18 at 12:29
@RoryMcCrossan Good my friend and how to validate the format/extension the image? — Igor Carreiro, Feb 21 '18 at 12:41
https://stackoverflow.com/questions/18299806/how-to-check-file-mime-type-with-javascript-before-upload — Rory McCrossan, Feb 21 '18 at 12:42

How to validate the size and format of an image imported by the tag?

0 Answers0