Загрузка изображения с помощью Mvc 3
Я реализовал загрузку файлов для изображений с помощью ASP.NET Mvc 3 и пакета Microsoft.Web.Helpers NuGet. Реализация остается простой, поскольку позволяет просматривать файл и загружать его в указанный каталог.
Вот что у меня есть для решения для загрузки изображений с помощью ASP.NET MVC 3 и плагина Microsoft.Web.Helpers NuGet.
![enter image description here]()
Теперь код 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 делает все остальное.