Responsive image Box Upload with save in database path with stylesheet in Asp.net MVC

 image must name --- noImg

image must nm- browse-img

 

Model

public class tbl_user

    {

        public HttpPostedFileBase Userimagefile { get; set; }

        public string Imgpath { get; set; }

    }

View

@model CodeFirstProject.Models.tbl_user

@{

    ViewBag.Title = "imgview";

}

<h2>imgview</h2>

<link href="~/Contentstylesheet/ProfileStyleSheet.css" rel="stylesheet" />

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

<head>

</head>

@using (Html.BeginForm("imgview", "Home", FormMethod.Post, new { @class = "form-horizontal", enctype = "multipart/form-data" }))

{

        <div class="container">

    <div class="row">

        <div class="col-md-4">

            <div class="user-pro-img">

                <input type="file" class="hidden" id="Browseimg" accept="image/*" name="Userimagefile"/>

                <img src="~/Content/noImg.jpg" class="img-responsive" id="userimg" />

                <p class="image-des text-center">Allowed Image Size : 3500*2933px</p>

                <div class="upload-photo">

                    <img src="~/Content/browse-img.png" class="img-responsive" />

                </div>

                <div class="remove-photo">

                    <span class="glyphicon glyphicon-remove" >

                    </span>

                </div>

            </div>

        </div>

    </div>

</div>

<div class="row">

    <div class="col-md-2">

        <input type="submit" value="Submit" />

    </div>

</div>

}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script>

    $('#userimg').click(function () {

        clickevent();

    });

    $('.upload-photo').click(function () {

        clickevent();

    });

    function clickevent()

    {

        $('#Browseimg').trigger('click');

    }

    $('#Browseimg').change(function () {

        var files = this.files;

        if (files && files[0]) {

            var filereader = new FileReader();

            filereader.readAsDataURL(files[0]);

            filereader.onload = function (x) {

                var imgs = new Image;

                imgs.src = x.target.result;

                imgs.onload = function () {

                    var width = this.width;

                    var height = this.height;

                    var type = files[0].type;

                    if ((width <= "3500" && height <= "2933") &&(type =="image/png" ||type =="image/jpg" || type =="image/jpeg"))

                    {

                        $('#userimg').attr('src', x.target.result);

                        $('.image-des').css("color", "black");

                    }

                    else {

                        $('.image-des').css("color", "red");

                    }

                 //   alert("width" +width +"height" +height +"type" +type )

                }

                 

                

            }

        }

    });

    $('.remove-photo').click(function () {

        $('#userimg').attr('src', "/Content/noImg.jpg");

    })

</script>

Controller

 public ActionResult imgview()

        {

            return View();

        }

        [HttpPost]

        public ActionResult imgview(tbl_user ss)

        {

            string filename = Path.GetFileNameWithoutExtension(ss.Userimagefile.FileName);

            string extension = Path.GetExtension(ss.Userimagefile.FileName);

            filename = filename + DateTime.Now.ToString("yymmssff") + extension;

            ss.Imgpath = "~/Img" + filename;

            filename = Path.Combine(Server.MapPath("~/Img"), filename);

            ss.Userimagefile.SaveAs(filename);

            db.Entry(ss).State = System.Data.Entity.EntityState.Modified;

            db.SaveChanges(); 

            return View();

        }

Stylesheet css

body {

}

.user-pro-img{

    /*border:1px solid #ededed;

    border-radius:3px;*/

}

.user-pro-img img{

    height:300px;

    cursor:pointer;

    

}

.user-pro-img:hover .upload-photo{

    transform:scaleY(1);

}

.user-pro-img .upload-photo{

    background-color: #242424;

    opacity: 0.4;

    width: 92%;

    height: 50px;

    position: absolute;

    bottom : 28px;

    left: 15px;

    cursor : pointer;

    transform:scaleY(0);

    transition:0.3s;

    transform-origin:bottom;

}

.user-pro-img .upload-photo:before{

    content: 'Change Photo';

    color : #eff;

    position: absolute;

    bottom: 10px;

    left: 110px;

    opacity:1;

    font-size:24px;

}

.user-pro-img .upload-photo img{

    height: 30px;

    width : 30px;

    color : #eff;

    position : absolute;

    top : 7px;

    left : 70px;

}

.user-pro-img .remove-photo{

    position: absolute;

    top: 0;

    right:15px;

    border: 2px solid #ddd;

    padding : 10px;

    cursor: pointer;

    transform :scale(0);

    transition:0.3s;

    transform-origin:top;

}

.user-pro-img .remove-photo .glyphicon-remove{

    color:#ededed;

}

.user-pro-img .remove-photo:hover .glyphicon-remove{

    color:#808080;

}

.user-pro-img:hover .remove-photo{

    transform :scale(1);

}