Mvc 3 Image Upload Gallery

Question

Implementé una carga de archivos para imágenes usando ASP.NET Mvc 3 y Microsoft.Web.Helpers NuGet package. La implementación es simple, ya que le permite buscar un archivo y subirlo a un directorio específico.

Esto es lo que tengo para mi solución de carga de imágenes usando ASP.NET MVC 3 y los Microsoft.Web.Helpers NuGet plugin.

Ahora el modelo de vista código

namespace MvcImageUpload.Models { 
    public class ImageUploadViewModel { 
     [UIHint("UploadedImage")] 
     public string ImageUrl { get; set; } 
     public string ImageAltText { get; set; } 
    }  
} 

Ahora para el controladorsimplemente se me ha caído esto en el controlador principal, ya que esto es sólo un proyecto de maqueta para conseguir que funcione . Acabo de agregar un ActionResult que toma un ImageUploadViewModel como parámetro.

 public ActionResult Upload(ImageUploadViewModel model) { 
     var image = WebImage.GetImageFromRequest(); 

     if (image != null) { 
      if (image.Width > 500) { 
       image.Resize(500, ((500 * image.Height)/image.Width)); 
      } 

      var filename = Path.GetFileName(image.FileName); 
      image.Save(Path.Combine("../Uploads/Images", filename)); 
      filename = Path.Combine("~/Uploads/Images", filename); 

       model.ImageUrl = Url.Content(filename); 
       model.ImageAltText = image.FileName.Substring(0, image.FileName.Length - 4); 

     } 

     return View("Index", model); 
    } 

Mi punto de vista de la carga de imágenes es simple, tiene un Html.BeginForm, que maneja el método de formulario de envío y tiene el tipo de codificación fija para ser "multipart/form-data".

Luego, utilizando el helper de Microsoft.Web.Helpers.FileUpload, solicito una imagen de la publicación HTTP y luego la visualizo usando una plantilla personalizada de DisplayFor, llamada ImageViewer.

@model MvcImageUpload.Models.ImageUploadViewModel 
    @using Microsoft.Web.Helpers; 
    @{ 
     ViewBag.Title = "Index"; 
    } 

    <h2>Image Uploader</h2> 
    @using (Html.BeginForm("Upload", "Home", FormMethod.Post, 
     new { @encType = "multipart/form-data" })) {   
     @FileUpload.GetHtml(initialNumberOfFiles: 1, allowMoreFilesToBeAdded: false, 
      includeFormTag: false, addText: "Add Files", uploadText: "Upload File") <br />   

     <input type="submit" name="submit" 
       value="Upload Image" text="Upload Images" 
       style="font-size: .9em;" /> 
     @Html.DisplayFor(x => x, "ImageViewer")<br /> 
    } 

Aquí es lo que el DisplayTemplate costumbre parece

@model MvcImageUpload.Models.ImageUploadViewModel 
@if (Model != null) { 
    <h4 style="color:Green;">Upload Success!</h4>   
    <p> 
     Alt Text has been set to <strong>@Model.ImageAltText</strong> 
    </p> 
    <img style="padding: 20px;" 
     src="@(String.IsNullOrEmpty(Model.ImageUrl) ? "" : Model.ImageUrl)" 
      id="uploadedImage" alt="@Model.ImageAltText"/> 
} 

Todo esto funciona y la imagen se ha cargado correctamente a la /Uploads/Images/FileName.extension en el formulario de envío.

Mi pregunta

¿Cómo puedo ahora tener otra vista para mostrar todas las imágenes de ese directorio, paginados y ser capaz de seleccionar y eliminar e imagen, de la vista y el directorio?

También sé que Microsoft.Web.Helpers.FileUpload, admite la carga de varios archivos, pero no puedo encontrar cómo implementar esto con mi solución actual. Cualquier ayuda sería muy apreciada.

Answer 1

lo que usted está planteando un aspecto bastante aplicación a mi Entonces cualquier consulta ....

para mostrar: recupera todas las imágenes desde su directorio uploads/Imágenes a través DirectoryInfo ... usted puede buscar un directorio basado en una extensión y luego le dará un conjunto de resultados que puede repetir ...

Cree una vista que muestre todos los registros como vínculos de imagen y en el controlador busque el resultado en esa vista .... Enlaza los registros como desee que se muestren en su VISTA ...

System.IO.DirectoryInfo info = new System.IO.DirectoryInfo("your directory path"); 
       var filesinfo= info.GetFiles("*.jpg", System.IO.SearchOption.AllDirectories); 
       var filenum= filesinfo.GetEnumerator(); 
       while (filenum.MoveNext()) 
       { 
        //populate some entity like in your case you have ImageUploadViewModel 
       } 

y puede implementar su lógica de eliminación mediante Ajax o mediante la publicación posterior depende de cómo lo desee ....

Asp.net MVC Views siguiente este tutorial y que le permitirá pasar por esto ....

pero de nuevo lo que están pidiendo es más como código de implementación no cualquier tema ....

Answer 2

El enfoque I' seguido anteriormente, es persistir la información del archivo en una base de datos (o lo que sea apropiado). p.ej. ruta de acceso, nombre de archivo, tipo de contenido, tamaño de archivo. Esto le brinda la mayor flexibilidad al editar (texto alternativo, título, descripción, relación con otros objetos). La descarga/visualización de los archivos se puede manejar según la convención de ruta, al crear un controlador ViewImage que solo obtiene una identificación de imagen como parámetro. Luego puede crear una url desde la ruta al archivo y solo necesita establecer el tipo de contenido. IIS luego hace el resto.

Answer 3

Después de hacer clic en el botón Cargar imagen, el sistema debe llamar al método que usa Request para obtener el archivo.

[HttpPost] 
    public ActionResult Upload() 
    { 
     if(Request.Files != null && Request.Files.Count > 0) 
     { 
       for (int i = 0; i < request.Files.Count; i++) 
       { 
        var postFile = request.Files[i]; 
        if (postFile != null && postFile.ContentLength > 0) 
        { 
         if (postFile.ContentLength < GetMaxRequestLength()) //10MB 
         { 
          var file = new ContractAttachment 
          { 
           Name = Path.GetFileName(postFile.FileName), 
           ContentType = postFile.ContentType, 
           FileLength = postFile.ContentLength, 
           FileData = GetStreamBuffer(postFile) 
          }; 
          files.Add(file); 
         } 

        } 
       } 
      } 

    } 

Hope this help.