Carga / visualización de imágenes en MVC 4


83

¿Alguien conoce algún tutorial paso a paso sobre cómo cargar / mostrar imágenes desde una base de datos usando Entity Framework? Revisé fragmentos de código, pero todavía no tengo claro cómo funciona. No tengo código, porque además de escribir un formulario de carga, estoy perdido. Cualquier ayuda (y me refiero a cualquier) es muy apreciada.

En una nota al margen, ¿por qué ningún libro cubre este tema? Tengo Pro ASP.NET MVC 4 y Professional MVC4, y no lo mencionan.


6
Si usted sigue Pro ASP MVC 4la SportsStore Tutorialcubre esta partida enpage 292
Komengem

tienes razón. Ni siquiera me di cuenta. Estaba buscando un capítulo sobre eso. Gracias
rogerthat

2
Sé que esto es para MVC 4, pero esta pregunta seguirá apareciendo al buscar MVC 5. - Encontré un gran tutorial que cubre tanto la carga a una base de datos como la carga a un servidor de archivos en Mvc 5 usando EF 6 en MikesDotNetting mikesdotnetting. com / article / 259 /…
Vahx

El capítulo del libro cubre la carga de imágenes a la base de datos, donde la mayoría de la gente quiere guardar la ruta a la base de datos y la imagen en una carpeta.
batir el

Respuestas:


142

Eche un vistazo a lo siguiente

@using (Html.BeginForm("FileUpload", "Home", FormMethod.Post, 
                            new { enctype = "multipart/form-data" }))
{  
    <label for="file">Upload Image:</label> 
    <input type="file" name="file" id="file" style="width: 100%;" /> 
    <input type="submit" value="Upload" class="submit" /> 
}

su controlador debe tener un método de acción que acepte HttpPostedFileBase;

 public ActionResult FileUpload(HttpPostedFileBase file)
    {
        if (file != null)
        {
            string pic = System.IO.Path.GetFileName(file.FileName);
            string path = System.IO.Path.Combine(
                                   Server.MapPath("~/images/profile"), pic); 
            // file is uploaded
            file.SaveAs(path);

            // save the image path path to the database or you can send image 
            // directly to database
            // in-case if you want to store byte[] ie. for DB
            using (MemoryStream ms = new MemoryStream()) 
            {
                 file.InputStream.CopyTo(ms);
                 byte[] array = ms.GetBuffer();
            }

        }
        // after successfully uploading redirect the user
        return RedirectToAction("actionname", "controller name");
    }

Actualización 1

En caso de que desee cargar archivos usando jQuery de forma asincrónica, pruebe este artículo .

el código para manejar el lado del servidor (para carga múltiple) es;

 try
    {
        HttpFileCollection hfc = HttpContext.Current.Request.Files;
        string path = "/content/files/contact/";

        for (int i = 0; i < hfc.Count; i++)
        {
            HttpPostedFile hpf = hfc[i];
            if (hpf.ContentLength > 0)
            {
                string fileName = "";
                if (Request.Browser.Browser == "IE")
                {
                    fileName = Path.GetFileName(hpf.FileName);
                }
                else
                {
                    fileName = hpf.FileName;
                }
                string fullPathWithFileName = path + fileName;
                hpf.SaveAs(Server.MapPath(fullPathWithFileName));
            }
        }

    }
    catch (Exception ex)
    {
        throw ex;
    }

este control también devuelve el nombre de la imagen (en una devolución de llamada de JavaScript) que luego puede usar para mostrar la imagen en el DOM.

ACTUALIZACIÓN 2

Alternativamente, puede probar Async File Uploads en MVC 4 .


Guau. Gracias. Voy a tratar de salir. ¿Algún recurso que pueda pensar que pueda leer para ampliar mis conocimientos sobre este tema? No encuentro nada.
rogerthat

1
después de hacerlo, file.SaveAs(path)¿cómo puedo eliminar el archivo de esa ruta?
J86

Usar angularjs para enviar una imagen de tipo de archivo html al lado del servidor es más fácil, stackoverflow.com/a/26409100/900284
Frank Myat Thu

@FrankMyatThu ¿usa angular solo para cargar imágenes? ¿No suena un poco extraño?
Idrees Khan

1
@DotNetDreamer Verificaría su sitio web lo antes posible, ya que hay un error detallado al iniciar sesión que expone información bastante importante en este momento ...
Gareth

46

Aquí hay un breve tutorial:

Modelo:

namespace ImageUploadApp.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Image
    {
        public int ID { get; set; }
        public string ImagePath { get; set; }
    }
}

Ver:

  1. Crear:

    @model ImageUploadApp.Models.Image
    @{
        ViewBag.Title = "Create";
    }
    <h2>Create</h2>
    @using (Html.BeginForm("Create", "Image", 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>
    }
    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>
    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    }
    
  2. Índice (para visualización):

    @model IEnumerable<ImageUploadApp.Models.Image>
    
    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    <table>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.ImagePath)
            </th>
        </tr>
    
    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.ImagePath)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
                @Html.ActionLink("Details", "Details", new { id=item.ID }) |
                @Ajax.ActionLink("Delete", "Delete", new {id = item.ID} })
            </td>
        </tr>
    }
    
    </table>
    
  3. Controlador (Crear)

    public ActionResult Create(Image img, HttpPostedFileBase file)
    {
        if (ModelState.IsValid)
        {
            if (file != null)
            {
                file.SaveAs(HttpContext.Server.MapPath("~/Images/") 
                                                      + file.FileName);
                img.ImagePath = file.FileName;
            }  
            db.Image.Add(img);
            db.SaveChanges();
            return RedirectToAction("Index");
        }
        return View(img);
    }
    

Espero que esto ayude :)


Vaya, muchas gracias por esto. ¿Qué pasa si quisiera restringir la imagen a jpeg?
Kala J

@KalaJ Si desea restringir las imágenes cargadas a solo jpg, puede agregar el atributo accept (Html5 solo funciona en Chrome y FF no IE). O puede verificar la extensión en el controlador filename.LastIndexOf(".")algo así. Espero que esto ayude
Jordy van Eijk

@JordyvanEijk, utilicé el atributo accept, sin embargo, solo funciona en Chrome. No funciona en FF o IE. Necesito alguna otra forma de validación.
Kala J

1
@KalaJ Majbe puedes hacer algo con la API de archivo Html5 Si necesitas algún tutorial Aquí está
Jordy van Eijk

2
Los piratas informáticos podrían cargar archivos maliciosos sin la validación del lado del servidor.
arao6

-16
        <input type="file" id="picfile" name="picf" />
       <input type="text" id="txtName" style="width: 144px;" />
 $("#btncatsave").click(function () {
var Name = $("#txtName").val();
var formData = new FormData();
var totalFiles = document.getElementById("picfile").files.length;

                    var file = document.getElementById("picfile").files[0];
                    formData.append("FileUpload", file);
                    formData.append("Name", Name);

$.ajax({
                    type: "POST",
                    url: '/Category_Subcategory/Save_Category',
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function (msg) {

                                 alert(msg);

                    },
                    error: function (error) {
                        alert("errror");
                    }
                });

});

 [HttpPost]
    public ActionResult Save_Category()
    {
      string Name=Request.Form[1]; 
      if (Request.Files.Count > 0)
        {
            HttpPostedFileBase file = Request.Files[0];
         }


    }

Entonces, ¿cómo mostrarías "msg" como una imagen en img?
eaglei22

Debe eliminar esta respuesta y recuperar sus puntos de reputación.
noobprogrammer
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.