Hi nauna,
Refer below sample.
I have taken reference of below article to make sample.
Model
ViewModel.cs
public class ViewModel
{
public string ImageFile { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
View
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<_Image_Preview_Before_Upload.Models.ViewModel>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#fUpload").change(function () {
$(".image-preview").html("");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test($(this).val().toLowerCase())) {
if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
$(".image-preview").show();
$(".image-preview")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
}
else {
if (typeof (FileReader) != "undefined") {
$(".image-preview").show();
$(".image-preview").append("<img height='100px' width='100px' />");
var reader = new FileReader();
reader.onload = function (e) {
$(".image-preview img").attr("src", e.target.result);
}
reader.readAsDataURL($(this)[0].files[0]);
} else {
alert("This browser does not support FileReader.");
}
}
} else {
alert("Please upload a valid image file.");
}
});
});
</script>
</head>
<body>
<%:Html.TextBoxFor(model => model.ImageFile, new { type = "file", @id = "fUpload"}) %>
<hr />
<div class="gallery image-preview">
</div>
</body>
</html>
Screenshot
