删除模式下的图像缓存并更新上传的新图像

我使用asp.net mvc 4和Bootstrap 3上传图像并将图像替换为modal上的图像。到目前为止，上传工作，但图像并没有取代，即使我重新加载页面并打开模式，它仍然显示缓存中的旧图像可能。这里是我的代码，打开模态删除模式下的图像缓存并更新上传的新图像

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

查看如何从缓存中删除图像，并更新上传的图片

查看莫代尔？严重需要这个帮助！谢谢。

来源

2016-01-13 Shihan Khan

将query string添加到您的图像这种类似的源代码。这将防止浏览器缓存

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

来源

2016-01-13 12:01:21

我会选择此作为答案，因为您先发布。非常感谢。那很快！ :) –

替换以下行

$('#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" />');

来源

2016-01-13 12:04:48 Azim

非常感谢回复。 :) –

删除模式下的图像缓存并更新上传的新图像

回答

相关问题