Question

我正在使用jQuery File Upload来支持 PHP 并且效果很好。唯一的问题是当我在同一页面的浏览器中打开两个标签（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秒钟在每个标签上上传照片吗？您知道这只是浪费带宽和服务器处理，对吗？

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

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

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

希望这会对你有所帮助。

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

1 个答案: