Edit in JSFiddle

$(function() {
		$("#file").change(function() {
			$("#message").empty(); // To remove the previous error message
			var file = this.files[0];
			var imagefile = file.type;
			var match= ["image/jpeg","image/png","image/jpg"];
			
			if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
			{
      	$("#file").css("color","red");
				$('#previewing').attr('src','http://www.bazaardaily.co.uk/wp-content/uploads/2017/06/Logo-Menu.png');
				$("#message").html("<p class='error'>Please select a valid image file, Only jpeg, jpg and png Images type allowed</p>");
				return false;
			} else {
				var reader = new FileReader();
				reader.onload = imageIsLoaded;
				reader.readAsDataURL(this.files[0]);

				// for validate image size
				var limit = 2097152; //2MB ==> 1048576 bytes = 1MB;
				if(this.files[0].size > limit){
					$("#message").html('<p class="warning">Image size is large, max size 2MB!</p>');
          $("#file").css("color","red");
				}
			}
		});
	});
  
	function imageIsLoaded(e) {
		$("#file").css("color","green");
		$('#image_preview').css("display", "block");
		$('#previewing').attr('src', e.target.result);
		$('#previewing').attr('width', '555px');
		$('#previewing').attr('height', '277px');
	};

<div id="message"></div>
<div>
  <img id="previewing" src="http://www.bazaardaily.co.uk/wp-content/uploads/2017/06/Logo-Menu.png" width="555" height="277" />
</div><br/>
<div><input type="file" name="file" id="file" autofocus /></div>

.error {
  background-color: #F44336;
  color: #FFFFFF;
  font-weight: bold;
  padding: 10px;
}

.warning {
  background-color: #E65100;
  color: #FFFFFF;
  font-weight: bold;
  padding: 10px;
}