Hi rani,
Refer below sample.
Controller
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
}
View
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form asp-controller="Home">
<input id="fileupload" type="file" />
<hr />
<div id="dvPreview"></div>
</form>
<script type="text/javascript">
$(function () {
$("#fileupload").change(function () {
$("#dvPreview").html("");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test($(this).val().toLowerCase())) {
if (typeof (FileReader) != "undefined") {
$("#dvPreview").show();
$("#dvPreview").append("<img />");
var reader = new FileReader();
reader.onload = function (e) {
$("#dvPreview img").attr("src", e.target.result);
$("#dvPreview img").attr("style", "height:200px;width: 200px");
}
reader.readAsDataURL($(this)[0].files[0]);
} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Please upload a valid image file.");
}
});
});
</script>
</body>
</html>
