MVC 3 Обновить загруженное изображение с тем же именем

Question

Я поставлен в тупик из-за проблемы с изображением ... вот и все.

В моем макете у меня есть изображение, которое выступает в качестве логотипа ... однако в представлении администратора есть возможность загрузитьновый логотип, и он просто заменяет текущий с точно таким же именем.После обратной передачи изображение не изменяется в макете на обновленное изображение, даже если обновленное изображение сохраняется.Если я обновлю страницу ctrl и F5, кеш исчезнет, ​​и я смогу увидеть новое изображение, но мне нужно, чтобы оно было более автоматизированным.

Вот мой тег img в макете

<img src="@Url.Content("~/Content/themes/base/images/Client_Logo.jpg")" id="ClientLogo" alt="" width="227" height="130" style="float: left;" />

Вот админский просмотр

@using (Html.BeginForm("Admin", "Home", FormMethod.Post, new { @encType = "multipart/form-data" }))
    {
        <fieldset>
            <legend>Logo Management</legend>
            <p>
                <input type="file" name="FileUpload" />
            </p>
            <p>
                <input type="submit" value="Upload" />
            </p>
        </fieldset>
    }

И, наконец, действие

[Authorize]
    [HttpPost]
    public ActionResult Admin()
try
            {
                HttpPostedFileBase file = Request.Files[0];

                if (file != null)
                {
                    var fileName = Path.GetFileName(file.FileName);
                    var path = Path.Combine(Server.MapPath("~/Content/themes/base/images"), fileName);
                    file.SaveAs(path);
                    System.IO.File.Delete(Path.Combine(Server.MapPath("~/Content/themes/base/images"), "Client_Logo.jpg"));
                    System.IO.File.Move(Path.Combine(Server.MapPath("~/Content/themes/base/images"), fileName), Path.Combine(Server.MapPath("~/Content/themes/base/images"), "Client_Logo.jpg"));
                }
                else
                {
                    ModelState.AddModelError("uploadError", "There is a problem uploading the file.");
                }
            }
            catch (Exception e)
            {
                ModelState.AddModelError("uploadError", e);
            }
return View();

Что каждый предлагает сделать, чтобы обновить изображение в макете, когда представление возвращается после загрузкиimage?

Приветствия.

Answer 1

Самое быстрое решение, которое я могу придумать, это отображение вашего логотипа с чем-то случайным, чтобы клиент никогда не попадал в кеш, например:

"/images/yourlogo.png?version=123455634"

Замена 123455634 чем-то всегда случайным.

Поскольку URL вашей картинки никогда не будет прежним, картинка всегда будет загружена.

Вы можете связываться с заголовками кэша для этого конкретного файла, но это самое быстрое исправление, которое яМожно подумать.

Надеюсь, это поможет.

РЕДАКТИРОВАТЬ попробуйте это:

<img src="@Url.Content("~/Content/themes/base/images/Client_Logo.jpg?version=" + DateTime.Now.Ticks.ToString())" id="ClientLogo" alt="" width="227" height="130" style="float: left;" />

Answer 2

Хорошо, вы можете установить кэширующие заголовки в этом файле, чтобы НЕ кэшировать в вашем файле web.config, но это не идеально.

Как насчет jQuery?

В вашем макете:

<img src="@Url.Content("~/Content/themes/base/images/Client_Logo.jpg")" id="ClientLogo" alt="" width="227" height="130" style="float: left;" data-src="@Url.Content("~/Content/themes/base/images/Client_Logo.jpg")"/>

По вашему мнению, вы хотите изменить изображение:

<script type="text/javascript">
     $(function(){
          $('#ClientLogo').attr('src',$('#ClientLogo').data('src') + '?t=' + new Date().getTime());
    });
</script>