Загрузка изображения с помощью Mvc 3

Я реализовал загрузку файлов для изображений с помощью ASP.NET Mvc 3 и пакета Microsoft.Web.Helpers NuGet. Реализация остается простой, поскольку позволяет просматривать файл и загружать его в указанный каталог.

Вот что у меня есть для решения для загрузки изображений с помощью ASP.NET MVC 3 и плагина Microsoft.Web.Helpers NuGet.

Теперь код ViewModel

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

Теперь для контроллера я просто отказался от этого в контроллере Home, так как это всего лишь макетный проект, чтобы заставить его работать. Я просто добавил ActionResult, который принимает параметр ImageUploadViewModel в качестве параметра.

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

Мой взгляд на загрузку изображений прост, у него есть Html.BeginForm, который обрабатывает метод формы Post и имеет тип кодировки, который должен быть "multipart/form-data".

Затем, используя помощник Microsoft.Web.Helpers.FileUpload, я запрашиваю изображение из сообщения HTTP, а затем показываю его с помощью настраиваемого шаблона DisplayFor, называемого 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 />
    }

Вот как выглядит пользовательский DisplayTemplate

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

Все это работает, и изображение успешно загружается в /Uploads/Images/FileName.extension на сообщение формы.

Мой вопрос

Как теперь у меня есть другое представление, чтобы отображать все изображения в этом каталоге, выгружать страницы и иметь возможность выбирать и удалять и изображение из представления и каталога?

Также я знаю, что Microsoft.Web.Helpers.FileUpload поддерживает загрузку нескольких файлов, но я не могу найти, как реализовать это с помощью моего текущего решения. Любая помощь была бы значительно оценена.

Ответ 1

После нажатия кнопки "Загрузить изображение" система должна вызывать метод, который использует Request для получения файла.

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

                    }
                }
          }

    }

Надеюсь на эту помощь.

Ответ 2

то, о чем вы спрашиваете, выглядит скорее реализацией для меня тогда любого запроса....

Отобразить: Извлеките все изображения из каталога Uploads/Images через DirectoryInfo... вы можете искать каталог на основе некоторого расширения, а затем он даст вам набор результатов, который вы можете продолжить.

Создайте представление, в котором будут отображаться все записи в виде ссылок на изображения и в контроллере, чтобы получить результат в этом представлении.... Свяжите те записи, которые вы хотите, чтобы они отображались в вашем VIEW...

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
               }

и вы можете реализовать свою логику удаления с помощью Ajax или через ответ обратно, зависит от того, как вы хотите...

Asp.net MVC Views после этого урока, и это позволит вам пройти через это....

но опять то, что вы просите, больше похоже на реализацию кода, а не на проблему....

Ответ 3

Подход, который я использовал ранее, заключается в том, чтобы сохранить информацию о файле в базе данных (или что-то подходящее). например путь, имя файла, тип содержимого, размер файла. Это дает вам максимальную гибкость при редактировании (текст, название, описание, отношение к другим объектам). Загрузка/просмотр файлов может быть обработана на основе соглашения о контуре путем создания контроллера ViewImage, который просто получает идентификатор изображения в качестве параметра. Затем вы можете создать URL-адрес из пути к файлу, и вам нужно только установить тип содержимого. Затем IIS делает все остальное.