We upload any type of files from client to server using html element

<input id='myFile' type="file" />

And using ASP.NET control

<asp:FileUpload ID='myFile' runat="server" />

We can restrict to upload only some types of file using specifying the accept attribute value to file content type like bellow

<input id='myFile' type="file" accept="image/gif, image/jpeg, image/png" /> 
<asp:FileUpload ID='myFile' runat="server" accept="image/gif, image/jpeg, image/png" />

File Type Validation

Client side validation

<script type="text/javascript">
  var allowFileTypes = ['image/gif', 'image/jpeg', 'image/png'];
  function validateFileTypes() {
     var files = document.getElementById("myFile").files;
     if (files && files[0]) {
        //alert(files[0].type);
if (allowFileTypes.indexOf(files[0].type) != -1)
          return true;
       else {
          alert('file type isn’t allowed');
          return false;
     }
  }
}
</script>

And in server side validation (C#)

if (myFile.HasFile)
    {
      if (myFile.PostedFile.ContentType.ToLower().Contains("image") == false)
          {
             //message to user
              return;
           }
}

 File Size Validation

Client side validation

<script type="text/javascript">
  var allowFileSize = 50*1024; //50KB
  function validateFileSize() {
     var files = document.getElementById("myFile").files;
     if (files && files[0]) {
        //alert(files[0].size);
if (files[0].size <= allowFileSize)
          return true;
       else {
          alert('file size exceeds the max size 50KB');
          return false;
     }
  }
}
</script>

And in server side validation (C#)

if (myFile.HasFile)
    {
      if (myFile.PostedFile.ContentLength > 50*1024)
          {
            //message to user
             return;
           }
}

Showing the selected image file as preview

We need to add an attribute onchange to the element like bellow

<input id='myFile' type="file" accept="image/gif, image/jpeg, image/png" onchange="return showPreview(this);"  />
<asp:FileUpload ID='myFile' runat="server" accept="image/gif, image/jpeg, image/png" onchange="return showPreview(this);"  />

And the function is bellow

function showPreview(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
               document.getElementById("img#preview").src = e.target.result;
                };
                reader.readAsDataURL(input.files[0]);
            }
            return true;
 }

For more about styling the file uploader, see the link http://www.quirksmode.org/dom/inputfile.html

Ref: http://hrn2k1.blogspot.com/2015/11/all-about-file-upload-control-in-web.html