Mvc 3 De De Téléchargement D'Images De La Galerie

J'ai mis en place un upload de fichier pour les images à l'aide de ASP.NET Mvc 3 et la Microsoft.Web.Les aides de package NuGet. La mise en œuvre est très simple puisqu'il vous permet de rechercher un fichier et de le télécharger dans un répertoire spécifié.

Voici ce que j'ai pour mon image télécharger la solution à l'aide de ASP.NET MVC 3 et Microsoft.Web.Les aides NuGet plugin.

Maintenant la ViewModel code

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

Maintenant, pour la contrôleur j'ai tout simplement abandonné ce dans le contrôleur de la Maison, puisque c'est juste une maquette du projet pour le faire fonctionner. J'ai juste ajouté un ActionResult qui prend un ImageUploadViewModel en tant que paramètre.

      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);
    }

Mon point de vue pour le téléchargement d'images est simple, il a une Html.BeginForm, qui gère le formulaire de publication de la méthode et a le type d'encodage du jeu d'être "multipart/form-data".

Puis à L'aide de Microsoft.Web.Les aides.FileUpload aide, je demande une image à partir de l'adresse HTTP post et ensuite l'afficher à l'aide personnalisée méthode displayfor modèle, appelé " 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 />
    }

Voici ce que la coutume DisplayTemplate ressemble

    @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"/>
}

Ce tous les ouvrages et l'image est téléchargée avec succès à l' /Uploads/Images/nom de fichier.extension sur le post de formulaire.

Ma question

Comment j'ai maintenant un autre affichage de toutes les images dans ce répertoire, paginé et être en mesure de sélectionner et de supprimer et de l'image, à partir de la vue et de l'annuaire?

Je sais aussi que le Microsoft.Web.Les aides.FileUpload, prend en charge le téléchargement de plusieurs fichiers, mais je ne trouve pas comment mettre en œuvre des ce avec ma solution actuelle. Toute aide serait grandement appriceated.

OriginalL'auteur Carl Weis | 2011-05-17