如何使用jQuery File Upload更新上传的图像？

Question

我正在使用PHP的 jQuery文件上传 ，效果很好。 唯一的问题是，当我在同一页面的浏览器中打开两个选项卡（index.html）时，我在选项卡1中上传了一张照片，并且看到了上传的照片，但是当我转到选项卡2时 ，则没有上传的照片。 我必须刷新页面才能看到它。

因此，我尝试通过以下方式解决问题：

setInterval(function() {
    $.ajax({
    url: $('#fileupload').fileupload('option', 'url'),
        dataType: 'json',
        context: $('#fileupload')[0]
    }).always(function () {
        $(this).removeClass('fileupload-processing');
    }).done(function (result) {
        $(this).fileupload('option', 'done').call(this, $.Event('done'), {
            result: result
        });
    });
}, 3000);

可行，但不是很好。 每三秒钟重复一次所有上传的图像（不是我刚刚上传的图像）。 我还尝试删除所有图像列表$("ul.files").find('.template-download').remove(); 然后添加它们，这样就不会重复图像。 但是正如我所说，效果不是很好。

任何帮助表示赞赏。 谢谢！

Answer 1

您每3秒在每个标签中上传一次照片吗？？ 您知道那只是浪费带宽和服务器处理，对吗？

当然，您的图像会重复出现，因为对于服务器而言，此代码每次执行都是一个新图像。 如果您创建了一种只刷新页面的方法，会更好吗？ 我的意思是，我想您将上传的照片存储在服务器中（否则您将无法在其他选项卡中看到它们）。 只需轮询服务器以了解是否每三秒钟上传一次新照片。

甚至更好的是，如果您要针对支持sessionStorage对象的html5兼容浏览器，则可以在那里添加（或更新）属性。 同一域中的任何其他选项卡将立即收到添加/修改此类属性的事件。 您可以使用它来知道何时上传新图像。

//when the image has uploaded...
sessionStorage.setItem('images', 'number-of-images');

而且，如果页面中有这样的事件处理程序，则此属性更改时会通知您，表明您可以刷新页面并获取新图像：

window.addEventListener('storage', function(e) {
    if (e.key == 'images') { //key 'images' updated.
         //refresh page via AJAX.
    }
}, false);

理想情况下，如果sessionStorage可用，则应使用此方法；如果不可用，则默认轮询该服务器：

if (window.sessionStorage) { 
     //sessionStorage support, use the event.
} else {
    //default to polling the web server for updates
}

希望这对您有所帮助。