How to upload multiple image with Fileupload in MVC
4.0...........................
Note: In this topic we will
discuss about how to save multiple image with file upload and save in database
base with binary format and photo type after that we will show images in another view
which name display and apply next
previouse concept……………………
-- sql Query……………………….
create database mukesh
use mukesh
create table tb_photo
(
id int identity(1,1) primary key,
name varchar(50),
photo varbinary(max),
type varchar(50)
)
Step 1: we add Controller
which name is HomeController…………………………
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using
MvcApplication1.Models;
using System.IO;
namespace
MvcApplication1.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
mukeshEntities me = new mukeshEntities();
public ActionResult Index()
{
return View();
}
//how to upload multiple
image with file upload
[HttpPost]
public ViewResult save(IEnumerable<HttpPostedFileBase> photo)
{
try
{
foreach (HttpPostedFileBase hp in photo)
{
tb_photo tb = new tb_photo();
byte[] ar = new byte[hp.ContentLength];
hp.InputStream.Read(ar, 0,
hp.ContentLength - 1);
tb.name = Path.GetFileNameWithoutExtension(hp.FileName);
tb.photo = ar;
tb.type = Path.GetExtension(hp.FileName);
me.tb_photo.Add(tb);
}
me.SaveChanges();
ViewBag.msg = "File
uploaded successfully.";
}
catch (Exception ex)
{
ViewBag.msg = ex.Message;
}
return View("Index");
}
// code for how to display
image………………………………….
public ActionResult display()
{
//return
View(me.tb_photo.ToList());
var v =
me.tb_photo.Select(m => new image { id = m.id, name = m.name }).ToList();
return View(v);
}
public FileResult create(int id)
{
var v =
me.tb_photo.Where(m => m.id == id).Select(m => new { m.photo, m.type
}).FirstOrDefault();
return File(v.photo,
v.type);
}
}
// create class which name
is image………………………………………..
public class image
{
public int id { get; set; }
public string name { get; set; }
}
}
Source
code for Index.cshtml ………………………………….
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$('#photo').bind('change', function ()
{
// var by =
this.files[0].size;
debugger;
var files = $('#photo');
var fileSize
var totalFiles = $('input[type=file]').get(0).files.length;
for (i = 0; i <
totalFiles ; i++)
{
var fileSize = fileSize
+ files[i].files[i].size;
if (files[i].size >
20971520)
{
}
}
});
});
</script>
</head>
<body>
<div>
@using (Html.BeginForm ("save","home",FormMethod.Post,new {enctype="multipart/form-data"}))
{
<table>
<tr><td colspan="2"><b><span style="color:red">How to upload
Multiple Image with File Upload in Mvc 4.0</span></b></td></tr>
<tr><td>Upload Image </td><td> <input type="file" name="photo" id="photo" multiple /></td></tr>
<tr><td colspan="2" ><input type="submit" value ="Upload" /></td></tr>
<tr><td colspan="2" >@ViewBag.msg</td></tr>
<tr><td colspan="2"> <span id="message"></span></td></tr>
</table>
}
@Html.ActionLink("Display
Photo","display","Home")
</div>
</body>
</html>
Result
:
Add
another view which name is display.cshtml
for show multiple uploaded image………………………………….
@using
MvcApplication1.Controllers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>display</title>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
//jQuery.fn.center = function
() {
// this.css("position",
"absolute");
// this.css("top", Math.max(0,
(($(window).height() - $(this).outerHeight()) / 2) +
//
$(window).scrollTop()) + "px");
// this.css("left", Math.max(0,
(($(window).width() - $(this).outerWidth()) / 2) +
//
$(window).scrollLeft()) + "px");
// return this;
//};
$(function ()
{
var count = $('.a').length;
var pos = 0;
$('.a').click(function ()
{
$('#mask').show();
pos = $(this).attr("id");
$('#photo').show();
$('#imgdisplay').attr('src', $(this).attr('src'));
}
);
//code for
..............previouse
$('#pre').click(function ()
{
if (pos > 1)
pos--;
$('#imgdisplay').attr("src", $('#' + pos).attr("src"));
}
);
$('#next').click(function ()
{
if (pos < count)
pos++;
$('#imgdisplay').attr("src", $('#' + pos).attr("src"));
}
);
$('#close').click(function ()
{
$('#mask').fadeOut();
$('#photo').fadeOut();
}
);
$('#mask').click(function ()
{
$('#mask').fadeOut();
$('#photo').fadeOut();
}
);
}
);
</script>
<style type="text/css">
.photo
{
height:160px;
width:150px;
border:1px solid;
float:left;
margin:5px;
}
</style>
</head>
<body>
@Html.ActionLink("Upload Image","Index")
<div>
@{
int i = 0, j = 0;
foreach (var v in (List<image>)Model)
{
if(i==3)
{
<div style="clear:both;"></div>
i = 0;
}
i++; j++;
<div class="photo">
<table>
<tr>
<td><img id="@j" class="a" src='@Url.Action("create",new{id=v.id})' height="130px" width="130px" /></td></tr>
<tr>
<td> @v.name</td>
</tr>
</table>
</div>
}
}
</div>
//create div which id is
mask..
<div id="mask" style="position :fixed;top:0px;left:0px;z-index:1000;height:100%;width:100%;background-color:black;opacity:0.8;display:none;"> </div>
<div id="photo" style="position:relative;top:100px;left:100px; z-index:2000;display:none;">
<table style="position:fixed; top:20%; left:40%;">
<tr><td colspan="3"> <img id="close" height="30px" width="30px" src="~/Image/index.jpg" style="position:absolute;right:55px;top:8px;" /></td>
</tr>
<tr>
<td><input id="pre" type="button" value="Pre" /></td>
<td><img src="" id="imgdisplay" style="width:500px; height:450px"/></td>
<td><input id="next" type="button" value="Next" /></td>
</tr>
</table>
</div>
</body>
</html>
Result
:
0 comments:
Post a Comment