预览图像并不总是使用 JQuery 和 AJAX Upload jQuery 插件重新加载

Question

我有一个可以上传图片的网站，我正在使用预览系统来显示所选图片。问题是图像有时会加载到预览 div，但其他时候它保持不变。但是，如果我点击刷新按钮，那么图像实际上会改变。因此，控制器动作肯定会被调用，它并不总是刷新预览图像。这是我的代码：

<img name="liga_r2_c3" src="/../images/ligasDeAmigos/prizes/<?php print $model->prize_photo?>" width="100" height="100" border="0" id="liga_r2_c3" alt=""/>

new AjaxUpload('liga_r2_c3', {
            action: 'uploadImage',
            data: {
                liga_id : liga,
                isPrize : 'true',
            },
            onComplete: function(file, response) {
                  var liga = $("#hidden_prize_picture").val();
                  var ruta = "/../images/ligasDeAmigos/prizes/"+liga+ '?rid=' + Math.random(); 
                  $('#liga_r2_c3').attr('src',ruta);
            }
        }); 

Answer 1

考虑到 Math.random() 的可预测性，您确定没有遇到重复的随机值吗？ Date.getTime 在这里会是一个更好的解决方案，因为它应该在刷新之间为您提供一个唯一标识符。

<img name="liga_r2_c3" src="/../images/ligasDeAmigos/prizes/<?php print $model->prize_photo?>" width="100" height="100" border="0" id="liga_r2_c3" alt=""/>

new AjaxUpload('liga_r2_c3', {
            action: 'uploadImage',
            data: {
                liga_id : liga,
                isPrize : 'true',
            },
            onComplete: function(file, response) {
                  var liga = $("#hidden_prize_picture").val();
                  var d = new Date();
                  var ruta = "/../images/ligasDeAmigos/prizes/"+liga+ '?rid=' + d.getTime(); 
                  $('#liga_r2_c3').attr('src',ruta);
            }
        });