上传文件而不刷新页面答案

【问题标题】：Upload file without page refresh上传文件而不刷新页面
【发布时间】：2011-08-22 09:50:44
【问题描述】：

我写了一个小jQuery，以便能够上传图片而无需刷新页面，但是当我上传图片时，我必须刷新页面才能出现新图像。我确定我的 jQuery 脚本有问题：

        var uploader = new qq.FileUploaderBasic({
        button: $('#account #picture .header')[0],
        action: '<?= Route::url('Account Upload Avatar'); ?>',
        allowedExtensions: ['png', 'jpg', 'gif'],
        onSubmit: function()
        {
        },
        onComplete: function(id, fileName, avatar)
        {
            $('#loader').hide();
            $('#picture img').attr('src', avatar.url + '?' + (new Date).getTime());
        }
    });
});

【问题讨论】：

我知道这不是你想要的，但它有一个很棒的 JQuery 插件，叫做 Uploadify，可以帮助你uploadify.com
查看zurb.com/playground/ajax_upload - 他们的插件完全符合您的要求，并且他们有示例代码来演示 onComplete 事件。
您是否检查过是您的代码有问题，而不是缓存问题？有时附加 url 可能无法按您的预期返回较新的文件。

标签： jquery forms refresh submit

【解决方案1】：

我打算编辑帖子以清理它，但后来我意识到你有一组无与伦比的括号；这将导致加载了 javascript 的任何浏览器都无法执行它（无论您是否被告知这是另一回事）。

代码应该如下所示：

var uploader = new qq.FileUploaderBasic({
button: $('#account #picture .header')[0],
action: '<?= Route::url('Account Upload Avatar'); ?>',
allowedExtensions: ['png', 'jpg', 'gif'],
onSubmit: function()
{
},
onComplete: function(id, fileName, avatar)
{
    $('#loader').hide();
    $('#picture img').attr('src', avatar.url + '?' + (new Date).getTime());
}
});

注意最后遗漏的});。

【讨论】：

@dana：您应该注意使用正确的代码作为示例，否则，人们将无法尝试复制问题并为您提供解决方案。您应该编辑您的代码示例以使其正确。