删除模式中的图像缓存并在上传时更新新图像答案

【问题标题】：Remove image cache in modal and update new image on upload删除模式中的图像缓存并在上传时更新新图像
【发布时间】：2016-01-13 11:56:57
【问题描述】：

我正在使用 Asp.net MVC 4 和 Bootstrap 3 上传图像并将图像替换为模态上的前一个图像。到目前为止，上传工作正常，但图像没有被替换，即使我重新加载页面并打开模式，它仍然可能显示缓存中的旧图像。

这是我的代码。

打开模态的视图

<script>
    $('.btnInfo').click(function (e) {
        var id = $(this).attr('href');
        e.preventDefault();
        $('#modal-content').load("FlatImageOne?FlId=" + id);
    });
</script>

<a href="@Model.serial" class="btnInfo" data-target="#myModal" data-toggle="modal">Change Featured Image</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Change Image</h4>
            </div>
            <div class="modal-body">
                <div id="modal-content"></div>
            </div>
        </div>
    </div>
</div>

模态视图

<script>
    $(document).ready(function () {
        $('#btnUpload').click(function (e) {
            e.preventDefault();
            var getFile = document.getElementById('file').files[0];
            var getId = $("#getFlId").val();
            var formdata = new FormData();
            formdata.append("file", getFile);
            formdata.append("getFlId", getId);
            $.ajax({
                url: '@Url.Action("FlatImageOne", "Home")',
                type: 'POST',
                data: formdata,
                processData: false,
                contentType: false,
                success: function (data) {
                    alert("Upload successful!");
                    $('#imgOne').empty();
                    $('#imgOne').html('<img src="/Images/Flats/' + getId + '-0.png" alt="your image" class="img-responsive" />');
                },
                error: function () {
                    alert("Error! Please Try Again!");
                }
            });
        });
    });
</script>

<div>
    @using (Html.BeginForm("FlatImageOne", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.ValidationSummary(true, "Error! Please provide valid information!")

        <input type="file" name="file" id="file" style="width: 100%;" /><br />
        <input type="hidden" name="getFlId" id="getFlId" value="@ViewBag.ImgName" />
        <input id="btnUpload" type="submit" class="btn btn-info" value="Upload" />
    }
</div><br />
<div id="imgOne">
    <img src="~/Images/Flats/@(ViewBag.ImgName)-0.png" alt="your image" class="img-responsive" />
</div>

如何从缓存中删除图片并在模态中更新上传的图片？

【问题讨论】：

标签： jquery asp.net-mvc twitter-bootstrap caching

【解决方案1】：

像这样将 query string 添加到您的图像源。这将阻止浏览器缓存

$('#imgOne').html('<img src="/Images/Flats/' + getId + '-0.png?' + (new Date()).getTime() + '" alt="your image" class="img-responsive" />');

【讨论】：

自从您第一次发布以来，我将选择此作为答案。非常感谢。那很快！ :)

【解决方案2】：

替换下面一行

$('#imgOne').html('<img src="/Images/Flats/' + getId + '-0.png" alt="your image" class="img-responsive" />');

用下面的行强制浏览器重新加载图像。

$('#imgOne').html('<img src="/Images/Flats/' + getId + '-0.png?"' + new Date().getTime() +' alt="your image" class="img-responsive" />');

【讨论】：

非常感谢您的回复。 :)