Question

我的jquery代码

.ajax({
            type: "POST",
            url: "crop/crop.php",
            data: dataString,
            cache: false,
            success: function(data){
                $('#popupMargin').hide();
                $('#avatar img').remove();
                $('#avatar').load('crop/dp.php');
                //$('#avatar').hide();

            }
        });

现在

//Codes in the file loaded (`dp.php`) called by jQuery above

    <?php session_start(); ?>
    <!-- To display display picture just after croppping -->
    <img src="users/<?php echo $_SESSION['userId']; ?>/img/dp.jpg" width="150">

每当我点击按钮#btn时，就会调用上面的ajax。文件crop.php会裁剪图片，并将其保存在dp.php中与上面相同的位置和名称。

所以这意味着，每次用户点击按钮#btn时，图像都会被更改。我希望在上面的jQuery代码中调用$('#avatar').load('crop/dp.php');时反映更改;但是，我不确定是否存在旧图像仍然存在的某种缓存。

.load()重新加载页面吗？如何确保显示更改（更新的图像）而不是旧图像？

Answer 1

我建议追加：

'?foo='+Math.random();

到你的图像路径..它是一个很好的黑客，以确保你总是看到一个文件的最新版本（例如，通过每次提供一个不同的参数的url - 你保证绕过任何缓存）。

Answer 2

如果您担心缓存，可以将时间戳作为GET参数附加到ajax请求中。这通常会迫使浏览器下载新的副本。

 $('#avatar').load('crop/dp.php?' + (new Date().getTime()));

另外，如果请求之间的$ _SESSION ['userId']保持不变，那么强制重新加载实际的jpg也不会有什么坏处。

<img src="users/<?php echo $_SESSION['userId']; ?>/img/dp.jpg?<?php echo time(); ?>" width="150">

希望有所帮助。

Answer 3

尝试var_dump变量的$_SESSION以确保它在PHP代码中发生了变化。

在crop/crop.php和crop/dp.php中确保代码顶部有session_start()。

重新加载页面以反映更改

3 个答案: