Insert image into folder and Inset image path into database and display image in view from image folder based on path given(stored) in database
The images stored as Binary data will be fetched as BYTE Array and then the BYTE Array will be converted to BASE64 string and then displayed in View in ASP.Net MVC 5
In index .cshtml
<h2>Index</h2>
@using (Html.BeginForm("Index", "Candidate", FormMethod.Post,new { enctype = "multipart/form-data" }))
@* enctype='multipart/form-data is an encoding type that allows files to be sent through a POST. *@{
<div class=”container”>
<table>
<td style=”width:80px;height:50px”><label>Binary Image</label><input type=”file” name=”file1″id=”file1″ style=”width: 100%;” /> <br />
</td>
<td>
<label>Path Image</label> <input type=”file” name=”file2″ id=”file2″ style=”width: 100%;” />
</td>
</td>
<td >
<input type=”submit” value=”Submit”/>
</td>
</tr>
</table>
</div>
In Controller
namespace angularmvcdemo.Controllers
{
public class CandidateController : Controller
{
modeldataEntities db = new modeldataEntities();
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(CandidateDetail Details, HttpPostedFileBase File1, HttpPostedFileBaseFile2)
{
// file1 to store image in binary formate and file2 to store path and url
// we are checking file1 and file2 are null or not according to that different case are there
if (File1 != null && File1.ContentLength > 0 &&File2!=null)
{
Details.BinaryPhoto = new byte[File1.ContentLength];// file1 to store image in binary formate
File1.InputStream.Read(Details.BinaryPhoto, 0, File1.ContentLength);
string ImageName = System.IO.Path.GetFileName(File2.FileName);//file2 to store path and url
string physicalPath = Server.MapPath(“~/img/” + ImageName);
// save image in folder
File2.SaveAs(physicalPath);
// store path in database
Details.PathPhoto = “img/” + ImageName;
db.CandidateDetails.Add(Details);
db.SaveChanges();
return PartialView(“detail”);
}
if (File1 != null && File1.ContentLength > 0 &&File2==null)
{
Details.BinaryPhoto = new byte[File1.ContentLength];// file1 to store image in binary formate
File1.InputStream.Read(Details.BinaryPhoto, 0, File1.ContentLength);
db.CandidateDetails.Add(Details);
db.SaveChanges();
return PartialView(“detail”);
}
if (File1 ==null&& File2 != null)
{
string ImageName = System.IO.Path.GetFileName(File2.FileName);//file2 to store path and url
string physicalPath = Server.MapPath(“~/img/” + ImageName);
// save image in folder
File2.SaveAs(physicalPath);
Details.PathPhoto = “img/” + ImageName;
db.CandidateDetails.Add(Details);
db.SaveChanges();
return PartialView(“detail”);
}
else {//if both file1 and file2 are null then we can store others details without any image
db.CandidateDetails.Add(Details);
db.SaveChanges();
return PartialView(“detail”);
}
}
In detail cshtml // to display image and other details
@{
angularmvcdemo.modeldataEntities db = new angularmvcdemo.modeldataEntities();
}
<table><tr><td colspan=”2″ style=”width:800px;height:50px”>candidate</td></tr>
@foreach(var detail in db.CandidateDetails){
<tr><td> binary image
@if (detail.BinaryPhoto != null)
{ var base64 = Convert.ToBase64String(detail.BinaryPhoto);
var imgsrc = string.Format(“data:image/jpg;base64,{0}”, base64);
<img src=’@imgsrc’ style=”max-width:100px;max-height:100px” />
}
else { <img src=”~/img/avatar-default.jpg” style=”max-width:100px;max-height:100px” />
<tr><td><label>path image</label>
@if(@detail.PathPhoto!=null)
{<img src=”@detail.PathPhoto” width=”100″ height=”100″ />}
else
{<img src=”~/img/avatar-default.jpg” style=”max-width:100px;max-height:100px” />
}</table>
In database , store like this
I just like the valuable information you provide for your articles. I will bookmark your blog and test again here frequently. I am reasonably sure I will be informed a lot of new stuff right right here! Best of luck for the following!
Nice Website Love this website