MVC 3 Загрузка изображения

Question

У меня есть представление, содержащее код, который позволяет пользователю загружать изображения.Я вытащил код с сайта, который я не могу найти.Код работает отлично, но мои пользователи просили просмотреть предварительный просмотр изображения перед отправкой страницы.

У моего просмотра есть следующее для моего изображения и кнопки загрузки.

<div class="editor-field">
     @if (Model.ImageData == null || Model.ImageData.Length == 0) { 
         @:None
     }
     else { 
         <img width="150" height="150" alt="Item Image" src="@Url.Action("GetImage", "ItemManagement")" />
     }
  <div>Upload new image: <input type="file" name="Image" /></div>
</div>

МойПомощник BeginForm выглядит следующим образом.

@using(Html.BeginForm("Add", "ItemManagement", FormMethod.Post, new{enctype="multipart/form-data"})) {

Итак, когда мое представление отправляется обратно, мое действие Add Action в моем контроллере выглядит следующим образом.

    [HttpPost]
    public ActionResult Add(ItemAddModel model, HttpPostedFileBase image) {
        if (!ModelState.IsValid) {
            return View(model);
        }

        if (image != null) {
            model.ImageMimeType = image.ContentType;
            model.ImageData = new byte[image.ContentLength];
            image.InputStream.Read(model.ImageData, 0, image.ContentLength);
        }
        _itemService.AddItem(model);
        return RedirectToAction("Index");
    }

Как я уже говорил, все здесь прекрасно работает,Но только после того, как форма отправлена, и мой пользователь снова открывает страницу, он может увидеть загруженное изображение.Я хотел бы добавить кнопку Обновить, которая получит изображение и загрузит его в элемент управления изображением без отправки обратно на сервер.Я не хочу хранить изображение в базе данных, пока форма не будет отправлена.

Answer 1

Вот код, на мой взгляд.Важными частями этого являются имя кнопки отправки, установленное на «UploadImageButton».Это соответствует свойству в моей ViewModel, которое используется моим методом Action в моем контроллере.Кроме того, class = "style-name cancel" предотвращает запуск проверки на стороне Клиента.

<div class="editor-field">
    @if (Model.ImageData == null || Model.ImageData.Length == 0) { 
        @:None
    }
    else { 
        <img id="itemImage" width="150" height="150" alt="@Model.ItemName" src="@Url.Action("GetImage", "ItemManagement", new { Model.ItemID })" />
    }
    @FileUpload.GetHtml(initialNumberOfFiles: 1, allowMoreFilesToBeAdded: false, includeFormTag: false, addText: "Add Image", uploadText: "Upload Image") <br />  
    <input type="submit" name="UploadImageButton" value="Upload Image" class="style-name cancel" />      
</div>

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

Answer 2

Вы можете оформить заказ , следующий за статьей .Он использует хороший Valums AJAX плагин загрузки .

Answer 3

если вы можете использовать html5, вы можете посмотреть в html5 file api