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

在上传图片后返回视图时，每个人都建议如何刷新布局中的图片？

干杯。

Answer 1

我能想到的最快的解决方法是随机显示你的徽标，这样客户就不会像以下那样点击缓存：

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

用随机内容替换123455634。

由于您的图片的网址永远不会相同，因此将始终下载图片。

您可以使用此特定文件的缓存标头，但这是我能想到的最快的修复方法。

希望这有帮助。

编辑试试这个：

<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>

MVC 3更新上传的同名图像

2 个答案: