1 - Criaremos um projeto ASP.NET MVC 4 e adicionaremos um banco de dados local, via EntityFramework, com uma tabela para armazenar os dados da imagem na qual efetuaremos o Upload
2 - Atualizaremos a interface MVC para efetuar o Upload de um arquivo
3 - Criaremos um mecanismo para visualizar a imagem que foi inserida no nosso banco de dados local
BAIXE OS FONTES (EM .NET CORE): ASP.NET MVC CORE - Image Upload
1 - Projeto com a tabela de Imagens
Crie um novo projeto no VS 2012, conforme imagens abaixo:
Adicione uma classe chamada [Imagem.cs] dentro da pasta [Models] do projeto criado, com o seguinte conteúdo:
using System; using System.Collections.Generic; using System.Linq; using System.Threading; using System.Web; namespace MvcApplication2.Models { public class Imagem { public static int _inc; public int Id { get; set; } public string Nome { get; set; } public string Conteudo { get; set; } public string Tipo { get; set; } public int Tamanho { get; set; } public Imagem() { Id = Interlocked.Increment(ref _inc); } } }
Compile o projeto, e depois adicione uma classe controladora chamada [ImagemController] dentro da pasta [Controllers] do projeto, da forma que vemos nas imagens abaixo:
Neste ponto já temos nosso cadastro pronto. Vamos adicionar o objeto de Upload de imagens nas telas [Create.cshtml e Edit.cshtml].
2 - Atualização da Create.cshtml
Atualize conteúdo da View Create.cshtml por todo código abaixo:
@model MvcApplication2.Models.Imagem
@{
ViewBag.Title = "Create";
}
<h2>Create</h2>
<script src="~/Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#divFileUpload").mouseenter(function () {
imageStatusOnHover();
}).mouseleave(function(){
imageStatusOffHover();
});
});
function imageStatusOnHover() {
if ($("#file1").val() != "") {
var fileURL = $("#file1").val().replace(/\\/g, "\\\\");
showImagemTooltip(fileURL);
}
}
function imageStatusOffHover() {
$('#divImageTooltip').hide();
}
function showImagemTooltip(file) {
$('#divImageTooltip').css({
"backgroundImage": "url(" + file + ")",
"background-repeat": "no-repeat",
"background-size": "contain",
"background-position": "center",
"background-color": "white"
});
$('#divImageTooltip').show();
$("#divFileUpload").mousemove(function (event) {
$('#divImageTooltip').css({ 'top': event.pageY, 'left': event.pageX });
});
}
</script>
@using (Html.BeginForm("Create", "Imagem", FormMethod.Post, new { enctype = "multipart/form-data" })) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>Imagem</legend>
<table>
<tr>
<td>
<div id="divFileUpload">
<input type="file" id="file1" name="file1" />
</div>
</td>
</tr>
<tr>
<td>
<div id="divImageTooltip" style="display:none; position: absolute; height:200px; width:200px; border:solid 1px black;"></div>
</td>
</tr>
</table>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
Desta forma, executando a aplicação, adicionando a URL "/Imagem" e clicando no botão [Create New], poderá já testar o recurso de Upload e Visualização de uma imagem [ao passar o mouse sobre o objeto de Upload], conforme mostra a tela abaixo:
Agora precisamos criar um processo para salvar/visualizar a imagem no nosso banco de dados.
3 - Salvar e Visualizar a Imagem do Banco de Dados
Altere todo conteúdo do seu arquivo [Index.cshtml] pelo especificado abaixo:
@model IEnumerable<MvcApplication2.Models.Imagem>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th>
@Html.DisplayNameFor(model => model.Nome)
</th>
<th>
@Html.DisplayNameFor(model => model.Tipo)
</th>
<th>
@Html.DisplayNameFor(model => model.Tamanho)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Nome)
</td>
<td>
@Html.DisplayFor(modelItem => item.Tipo)
</td>
<td>
@Html.DisplayFor(modelItem => item.Tamanho)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
@Html.ActionLink("Details", "Details", new { id=item.Id }) |
@Html.ActionLink("Delete", "Delete", new { id=item.Id })
</td>
</tr>
}
</table>
Altere todo o conteúdo do arquivo [Edit.cshtml] pelo conteúdo abaixo:
@model MvcApplication2.Models.Imagem
@{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
<script src="~/Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#divFileUpload").mouseenter(function () {
imageStatusOnHover();
}).mouseleave(function(){
imageStatusOffHover();
});
});
function imageStatusOnHover() {
var fileTitleContent = $("#fileTitle1")[0].textContent;
if (fileTitleContent != "")
{
var url = String(window.location.protocol) + "//" + String(window.location.host) + "/";
url += "Imagem/BuscarAnexoImagemPorNome?nomeImagem=" + fileTitleContent;
$.ajax({
type: "POST",
url: url,
success: function (file) {
showImagemTooltip(file);
}
});
}
}
function imageStatusOffHover() {
$('#divImageTooltip').hide();
}
function showImagemTooltip(file) {
$('#divImageTooltip').css({
"backgroundImage": "url(" + file.Url + ")",
"background-repeat": "no-repeat",
"background-size": "contain",
"background-position": "center",
"background-color": "white"
});
$('#divImageTooltip').show();
$("#divFileUpload").mousemove(function (event) {
$('#divImageTooltip').css({ 'top': event.pageY, 'left': event.pageX });
});
}
</script>
@using (Html.BeginForm("Edit", "Imagem", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>Imagem</legend>
<table>
<tr>
<td>
<div id="divFileUpload">
<label id="fileTitle1">@ViewBag.FileTitleLabel</label>
<input type="file" id="file1" name="file1" />
</div>
</td>
</tr>
<tr>
<td>
<div id="divImageTooltip" style="display:none; position: absolute; height:200px; width:200px; border:solid 1px black;"></div>
</td>
</tr>
</table>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
E finalmente, altere também todo conteúdo da classe [ImagemController.cs] pelo especificado abaixo.
Obs: Como o objetivo é mostrar apenas os recursos de imagem, não me preocupei em separar o projeto em camadas, pois vai notar que o acesso a dados ficou na classe controladora.
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication2.Models;
namespace MvcApplication2.Controllers
{
public class ImagemController : Controller
{
private StoreDBContext db = new StoreDBContext();
//
// GET: /Imagem/
public ActionResult Index()
{
return View(db.Imagems.ToList());
}
//
// GET: /Imagem/Details/5
public ActionResult Details(int id = 0)
{
Imagem imagem = db.Imagems.Find(id);
if (imagem == null)
{
return HttpNotFound();
}
return View(imagem);
}
//
// GET: /Imagem/Create
public ActionResult Create()
{
return View();
}
//
// POST: /Imagem/Create
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Imagem imagem)
{
var img = new Imagem();
var file1 = Request.Files["file1"];
if (!string.IsNullOrEmpty(file1.FileName))
{
img.Nome = file1.FileName.Substring(file1.FileName.LastIndexOf("\\") + 1);
var binaryData = new Byte[file1.InputStream.Length];
file1.InputStream.Read(binaryData, 0, (int)file1.InputStream.Length);
var base64String = Convert.ToBase64String(binaryData, 0, binaryData.Length);
img.Conteudo = base64String;
img.Tamanho = file1.ContentLength;
img.Tipo = file1.ContentType;
db.Imagems.Add(img);
db.SaveChanges();
}
return RedirectToAction("Index");
}
//
// GET: /Imagem/Edit/5
public ActionResult Edit(int id = 0)
{
Imagem imagem = db.Imagems.Find(id);
ViewBag.FileTitleLabel = "";
if (imagem != null) ViewBag.FileTitleLabel = imagem.Nome;
return View(imagem);
}
//
// POST: /Imagem/Edit/5
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(Imagem imagem)
{
ViewBag.FileTitleLabel = "";
return RedirectToAction("Index");
}
//
// GET: /Imagem/Delete/5
public ActionResult Delete(int id = 0)
{
Imagem imagem = db.Imagems.Find(id);
if (imagem == null)
{
return HttpNotFound();
}
return View(imagem);
}
//
// POST: /Imagem/Delete/5
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public ActionResult DeleteConfirmed(int id)
{
Imagem imagem = db.Imagems.Find(id);
db.Imagems.Remove(imagem);
db.SaveChanges();
return RedirectToAction("Index");
}
public ActionResult BuscarAnexoImagemPorNome(string nomeImagem)
{
return Json(new { Url = Url.Action("CriarAnexoImagem", "Imagem", new { nomeImagem = nomeImagem }) });
}
public FileContentResult CriarAnexoImagem(string nomeImagem)
{
var file = db.Imagems.Where(w => w.Nome.Equals(nomeImagem));
if (file == null) return null;
return File(Convert.FromBase64String(file.FirstOrDefault().Conteudo), file.FirstOrDefault().Tipo, file.FirstOrDefault().Nome);
}
protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
}
}
Nesta classe controladora, e no arquivo Edit.cshtml, vai notar pontos interessantes:
- Ao passar o mouse sobre o objeto de Upload de arquivos, ocorre uma chamada Ajax para executar o método [Imagem/BuscarAnexoImagemPorNome]
- Este método busca o registro da imagem e retorna um JSON com a chamada para outro método [CriarAnexoImagem] que vai retornar o arquivo (FileContentResult), através da conversão da String que foi salva no formato [Base64] no banco de dados (na Action Create)
- Depois o JScript [showImagemTooltip] mostra a imagem em um Div, tendo como background a imagem retornada.
Em fim, sua tela de consulta deverá estar como exemplificado abaixo:
[]s
