Html 在网页上强制刷新图像的最佳方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16822831/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the best way to force an image refresh on a webpage?
提问by leora
I have a an asp.net-mvc site. On one of the pages, I have an image, I use jcropto allow users to crop the image. When this click submit, I crop the image on the server side and then reload the page. The issue is that the image looks the same as before . . if i hit F5 and refresh the page then the updated image shows up..
我有一个 asp.net-mvc 站点。在其中一个页面上，我有一个图像，我使用jcrop来允许用户裁剪图像。当点击提交时，我在服务器端裁剪图像，然后重新加载页面。问题是图像看起来和以前一样。. 如果我按 F5 并刷新页面，则会显示更新的图像。
Is there anyway to avoid having to force a F5 refresh in this case?
在这种情况下，有没有办法避免强制 F5 刷新？
回答by Jairo Filho
This is a trick, but it works.
这是一个技巧，但它有效。
Put a variable and random number in the image url. Something like:
在图像 url 中放置一个变量和随机数。就像是：
<img src="photo.jpg?xxx=987878787">
Maybe there's a better way, but it works for me.
也许有更好的方法，但它对我有用。
回答by Mark
Expanding on one of the other answers
扩展其他答案之一
if you have the photo on your server, or accessible then you can stat the file itself and use the modified time in the image source:
如果您的服务器上有照片，或者可以访问，那么您可以统计文件本身并使用图像源中的修改时间：
<?php
if (is_file($PathToFile . '/photo.jpg'))
{
$FileDetails = stat($PathToFile . '/photo.jpg');
echo '<img src="photo.jpg?MT=' . dechex($FileDetails['mtime']) . '" />';
}
?>
This gives the best of both worlds as it will use browser caching normally but will force a re-read if the image file is changed (e.g. through re-upload)
这提供了两全其美的方法，因为它会正常使用浏览器缓存，但如果图像文件发生更改（例如通过重新上传），则会强制重新读取
回答by Andy Gee
I would recommend posting the coordinates of the crop to a php script, cropping in php, giving it a new name then setting the SRC attribute to the url of the new image.
我建议将裁剪的坐标发布到 php 脚本，在 php 中裁剪，给它一个新名称，然后将 SRC 属性设置为新图像的 url。
Something like but needs tidying:
类似但需要整理的东西：
jcrop page:
jcrop 页面：
<form id="crop_settings" action="saveimage.php" method="post" style="display:none">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
</form>
<button id="save_picture">save image</button>
<script>
$('#cropbox').Jcrop({
onChange: updatePreview,
onSelect: updatePreview
});
function updatePreview(c){
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
$("#save_picture").click(function(){//some save button
$.ajax({
type: "POST",
url: "saveimage.php",
data: $("#crop_settings").serialize(),
success: function(data){
$(#the_display_image).attr("src","new.jpg")
}
});
});
</script>
saveimage.php
保存图片.php
if(isset($_POST['x'])&&isset($_POST['y'])&&isset($_POST['w'])&&isset($_POST['h'])){
$targ_w = 300;
$targ_h = 500;
$src = 'original.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor($targ_w,$targ_h);
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],$targ_w,$targ_h,$_POST['w'],$_POST['h']);
imagejpeg($dst_r,'new.jpg',90);
}
回答by the_lotus
Some trick is to change the name of the image. You can also change the HTTP header to make sure to browser does not cache the image.
一些技巧是更改图像的名称。您还可以更改 HTTP 标头以确保浏览器不会缓存图像。
Setting optimum http caching headers and server params in ASP.Net MVC and IIS 7.5
回答by geekymartian
You should be able to refresh the image using JQuery.
您应该能够使用 JQuery 刷新图像。
$("#image").attr("src", "/imagecropped.jpg");
Basically you need to set the src of the image again when the user submits the cropped image.
基本上，当用户提交裁剪后的图像时，您需要再次设置图像的 src。
Another problem you may encounter if the image has the same name is browser caching.
如果图像具有相同的名称，您可能会遇到的另一个问题是浏览器缓存。
This has been answered here before: How to reload/refresh an element(image) in jQuery
这之前已经在这里回答过：如何在 jQuery 中重新加载/刷新元素（图像）
