9

Estou tentando fazer o upload de imagens para minha aplicação. Fiz um protótipo de upload, só que ele não mostra a imagem, e sim o ID ou NOME dela. E eu estou fazendo o upload para uma pasta que criei no meu projeto.

Minhas dúvidas são:

Como faço pra mostrar essa imagem?

No projeto que estou trabalhando de verdade, preciso mostrar essa imagem para o usuário, pois é uma escola e precisa ter a foto do aluno. Eu já até criei o cadastro do aluno;

Como fazer para vincular essa foto ao cadastro do aluno em questão?

Devo criar um model de aluno e outro de imagem, ou tem alguma outra forma?

E qual é a melhor forma de fazer upload, gravando a imagem no banco ou em uma pasta no projeto?

Aqui os meus códigos de protótipo:

Imagem.cs (Model)

public partial class Imagem
{

    public int ID { get; set; }
    public string ImagePath { get; set; }
}

ImagemController.cs(Controller, e aqui só tem a parte do create)

  public ActionResult Create()
    {
        return View();
    }

    // POST: /Imagem/Create
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(Imagem img, HttpPostedFileBase file)
    {
        if (ModelState.IsValid)
        {
            if (file != null)
            {
                file.SaveAs(HttpContext.Server.MapPath("~/Imagens/")
                                                      + file.FileName);
                img.ImagePath = file.FileName;
            }
            db.Imagems.Add(img);
            db.SaveChanges();
            return RedirectToAction("Index");
        }
        return View(img);
    }

Index.cshtml(a View)

<table>
<tr>
    <th>
        @Html.DisplayNameFor(model => model.ImagePath)
    </th>
</tr>

@foreach (var item in Model) {
    <tr>
        <td>
           @Html.DisplayFor(modelItem => item.ID)
           @* <img src="@Url." alt="Image" width="300px" /> *@
        </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>

Create.cshtml(Outra View)

@using (Html.BeginForm("Create", "Imagem", null, FormMethod.Post,
                          new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
    <legend>Image</legend>
    <div class="editor-label">
        @Html.LabelFor(model => model.ImagePath)
    </div>
    <div class="editor-field">
        <input id="ImagePath" title="Upload a product image"
               type="file" name="file" />
    </div>
    <p><input type="submit" value="Create" /></p>
</fieldset>
}

2 Respostas 2

11

Solução Simples:

Pelo que eu percebi se ta usando Entity Framework, ótima escolha. Então eu fiz um exemplo bem simples como deveria ser esse comportamento.

class Aluno

namespace MvcAppUpload.Models
{
    using System;
    using System.Collections.Generic;
    
    public partial class Aluno
    {
        public int AlunoId { get; set; }
        public string NomeCompleto { get; set; }
        public string Foto { get; set; }
    }
}

Perceba que é um classe simples aonde possui um AlunoId que é a chave primária, NomeCompleto e Foto, sendo que eu guardo sempre o caminho da foto e o arquivo dentro do diretório.

controller Aluno

Metodo Create

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Aluno aluno, HttpPostedFileBase file)
{
    if (ModelState.IsValid)
    {
        db.Aluno.Add(aluno);
        db.SaveChanges();

        if (file != null)
        {
            String[] strName = file.FileName.Split('.');
            String strExt = strName[strName.Count() - 1];
            string pathSave = String.Format("{0}{1}.{2}", Server.MapPath("~/Imagens/"), aluno.AlunoId, strExt);
            String pathBase = String.Format("/Imagens/{0}.{1}", aluno.AlunoId, strExt);
            file.SaveAs(pathSave);
            aluno.Foto = pathBase;
            db.SaveChanges();
        }

        return RedirectToAction("Index");
    }

    return View(aluno);
}

Primeiramente, eu gravo o Aluno e a Foto vem logicamente em branco (NULL) e ai confiro se a file que vem do input type file vem com a imagem se vier eu extraio desse arquivo a extensão do mesmo e gero uma combinação do AlunoId + '.' + Extensão da Foto sendo como exemplo de nome: 1.jpg (Aluno 1 e foto com extensão jpg). Eu particularmente uso essa técnica para que as fotos não sobrescrevam umas as outras.

Metodo Edit

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(Aluno aluno, HttpPostedFileBase file)
{
    if (ModelState.IsValid)
    {
        db.Entry(aluno).State = EntityState.Modified;
        db.SaveChanges();
        if (file != null)
        {
             if (aluno.Foto != null)
             {
                if (System.IO.File.Exists(Server.MapPath("~/" + aluno.Foto)))
                {
                    System.IO.File.Delete(Server.MapPath("~/" + aluno.Foto));
                }
             }
            String[] strName = file.FileName.Split('.');
            String strExt = strName[strName.Count() - 1];
            string pathSave = String.Format("{0}{1}.{2}", Server.MapPath("~/Imagens/"), aluno.AlunoId, strExt);
            String pathBase = String.Format("/Imagens/{0}.{1}", aluno.AlunoId, strExt);
            file.SaveAs(pathSave);
            aluno.Foto = pathBase;
            db.SaveChanges();
        }
        return RedirectToAction("Index");
    }
    return View(aluno);
}

Views Aluno

View Create

@model MvcAppUpload.Models.Aluno
@{
    ViewBag.Title = "Create";
}
<h2>Create</h2>
@using (Html.BeginForm("Create", "Alunos", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Aluno</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.NomeCompleto)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.NomeCompleto)
            @Html.ValidationMessageFor(model => model.NomeCompleto)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Foto)
        </div>
        <div class="editor-field">
            <input type="file" name="file" id="file" />
            @Html.HiddenFor(model => model.Foto)
            @Html.ValidationMessageFor(model => model.Foto)
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Segue a mesma forma para o Edit.

View Edit

@model MvcAppUpload.Models.Aluno
@{
    ViewBag.Title = "Edit";
}
<h2>Edit</h2>
@using (Html.BeginForm("Edit", "Alunos", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Aluno</legend>
        @Html.HiddenFor(model => model.AlunoId)
        <div class="editor-label">
            @Html.LabelFor(model => model.NomeCompleto)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.NomeCompleto)
            @Html.ValidationMessageFor(model => model.NomeCompleto)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Foto)
        </div>
        <div class="editor-field">
            <input type="file" name="file" id="file" />
            @Html.HiddenFor(model => model.Foto)            
        </div>
        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

View Index

Exibição da Foto

@model IEnumerable<MvcAppUpload.Models.Aluno>
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.NomeCompleto)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Foto)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.NomeCompleto)
        </td>
        <td>
            <img src="@item.Foto" border="0" width="150px" />
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.AlunoId }) |
            @Html.ActionLink("Details", "Details", new { id=item.AlunoId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.AlunoId })
        </td>
    </tr>
}
</table>
8
  • Muito bom cara, muito mesmo. Mas nesse caso, eu precisaria ter no controller as actions Delete,Update e Details ? Eu digo, caso o usuário queira trocar a imagem, ele trocaria numa boa ? Commented 29/04/2014 às 14:30
  • Sim, trocaria numa boa, o exemplo é para você ter idéia com seria um create e edit, mas, os outros metodos não são obrigatórios
    – user6026
    Commented 29/04/2014 às 14:31
  • Ah entendi. Então o Create e o Edit, seriam dessa mesma forma que você colocou ai ? Porque tenho medo de que o diretório fique cheio demais de imagens. Digo, o usuário só cria uma em cima da outra, nunca deleta a foto antiga. Commented 29/04/2014 às 14:33
  • 1
    Eu alterei o código para excluir se o edit vier com foto!
    – user6026
    Commented 29/04/2014 às 14:43
  • 1
    Muito obrigado pela sua paciência e pela disponibilidade em me ajudar. Olha funcionou certinho, do jeito que eu queria. Queria te agradecer demais ! Valeu pela ajuda @FCCDias! Commented 29/04/2014 às 17:57
1

Eu costumo guardar a imagem numa pasta (no projecto, ou fora dele), e guardo apenas o nome da imagem na base de dados.

Agora se queres associar a imagem ao User, precisam de ter uma relação entre as tabelas (ou guardar o id da imagem na tabela do user, ou o id do user na tabela das imagens). Também podes guardar logo o nome da imagem na tabela do user (apenas para o caso de associares apenas uma foto), ficando apenas com uma tabela.

Para apresentares logo a imagem no fim de carregar, podes usar uma extensão ou criar tu próprio usando javascript. Tenho este link guardado, tenta dar uma espreitadela.

PS- Tentei fazer comentário, mas ficava muito grande :P

EDIT

Guardar Documento/Foto na base de dados e numa pasta:

//Guardar nome do ficheiro na tabela/inserir user
TabelaUtilizador df = new TabelaUtilizador();
df.Nome = "Alberto Silva" //Nome do User
df.NomeDocFoto = nameFile; // ESTE namefile é o nome do teu ficheiro, que deves receber por parametro na função
db.TabelaUtilizador.Add(df);
db.SaveChanges();
//Guardar Ficheiro
var path = Path.Combine(("D:/PastaFotosUser"), nameFile); // para pastas fisicas
filepath.SaveAs(path);
8
  • Nossa cara, muito obrigado pela ajuda. Mas por exemplo, esse link que você me mandou é para fazer upload de arquivo, ele funciona da mesma maneira pra fotos ? Eu digo, fazer o upload e fazer o display e tal ? E outra coisa, tranquilo ter colocado em resposta ! @CesarMiguel Commented 29/04/2014 às 13:43
  • Sim, podes testar aqui blueimp.github.io/jQuery-File-Upload Commented 29/04/2014 às 13:45
  • Tenho uma outra dúvida, como que eu salvaria a imagem em uma pasta e o nome dela no banco ? Ficando assim todos os dados em uma tabela ? Commented 29/04/2014 às 14:25
  • 1
    Alterei a minha respostam dá uma olhadela Commented 29/04/2014 às 14:40
  • Sim sim, então o create e edit são a mesma coisa né ? Usaria somente o edit no controller pra fazer o upload da foto, certo ? Commented 29/04/2014 às 14:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .