MVC - upload and Display Images

Step1:

<script type="text/javascript" src="~/js/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><script src="~/js/imagepicker.js"></script>

imagepicker.js

$(document).ready(
  function () {
  $("#img").change(function () {
  $("#dvPreview").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) {
  $("#dvPreview").show();
  $("#dvPreview")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
  }
  else {
  if (typeof (FileReader) != "undefined") {
  $("#dvPreview").show();
  $("#dvPreview").append("<img id='profile'/>");
  var reader = new FileReader();
  reader.onload = function (e) {
  $("#dvPreview 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.");
  }
  });
  });


step2: index.cshtml

 @using (Html.BeginForm("UserRegister", "UserRegistration", FormMethod.Post, new { enctype = "multipart/form-data", @class = "msform", role = "form" }))
                    {                        <center><div id="dvPreview" name="dvPreview" class="prw"><img id="imgPreview" name="imgPreview" src="~/images/Browse.png" style="padding: 10px;border-radius: 100%;margin-bottom: 20px;" /></div></center>
                        <input type="file" id="img" name="img" />
                                               <center><input type="submit" id="btnSubmit" value="Next" class="next action-button" /></center>
                    }


OutPut