image must name --- noImg
image must nm- browse-img Model
image must name --- noImg
image must nm- browse-imgpublic 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);
}
No comments:
Post a Comment