上传后强制图像重新加载显示以前上传的图像答案

【问题标题】：Forced image reload after upload shows previously uploaded image上传后强制图像重新加载显示以前上传的图像
【发布时间】：2015-05-20 17:22:32
【问题描述】：

我有以下标记：

用户可以选择一个图片资源，该图片资源将上传到服务器并作为div容器的背景图片显示在表单顶部。

<div id="self" style="background-image: url(self.jpg)"></div>

<form id="photo_upload" enctype="multipart/form-data" action="/photo" method="post">

    <input type="file" id="select_photo" name="photo" />

</form>

我希望在上传新图片后立即重新加载背景图片。我在图像 URL 中添加时间戳以强制重新加载。

$(document).ready(function() {

    function reloadBackground(tag) {
        // get background image source
        var source = tag.css('background-image').slice(4, -1);

        var index = source.lastIndexOf('?');

        if (index > -1) {
            // remove time stamp
            source = source.substring(0, index);
        }

        var image = new Image();

        image.onload = function() {
            // set new background image source
            tag.css('background-image', 'url(' + image.src + ')');
        }

        // add time stamp to force reload
        image.src = source + '?t=' + (new Date().getTime());
    }

    $('#select_photo').change(function() {
        $('#photo_upload').ajaxSubmit({
            error: function(response) {
                console.error(response.status);
            },

            success: function(response) {
                reloadBackground($('#self'));
            }
        });
    });

});

问题来了：

我第一次选择并上传新图像时，背景图像不会改变。选择另一张照片后，背景图像会更改为显示之前上传的照片等。但是，如果我手动重新加载页面，则会显示正确的（即最后上传的）图像。看来 reloadBackground() 调用得太早了。

你知道出了什么问题吗？

谢谢！

编辑：

为了完整起见，这是 nodeJS 提供图像的方式：

app.get('/self.jpg', function (req, res, next) {
    res.sendFile(user.id + '.jpg', {
        root: uploadDir
    }, function (error) {
        if (error) {
            console.log(error);
            res.status(error.status).end();
        }
    });
});

【问题讨论】：

标签： javascript html ajax node.js

【解决方案1】：

function reloadBackground(tag) {
    // get background image source
    var source = tag.css('background-image').slice(4, -1);

    var index = source.lastIndexOf('?');

    if (index > -1) {
        // remove time stamp
        source = source.substring(0, index);
    }

    var image = new Image();

    image.onload = function() {
        // set new background image source
        tag.css('background-image', 'url(' + image.src + ')');
    }

    // add time stamp to force reload
    image.src = source + '?t=' + (new Date().getTime());
}

把这部分放到document准备函数之外

【讨论】：

感谢您的提示，但这并没有什么不同。

【解决方案2】：

尝试仅从服务器返回文件名并使用 img 标签显示它：

<div id="self">
    <img src="self.jpg" alt="Self"/>
</div>

<form id="photo_upload" enctype="multipart/form-data" action="/photo" method="post">
    <input type="file" id="select_photo" name="photo"/>
</form>

和js：

function reloadBackground(source) {
    var image = new Image();
    image.onload = function () {
        $('#self img').replaceWith(image);
    };

    image.src = source;
}

$('#select_photo').change(function() {
    $('#photo_upload').ajaxSubmit({
        error: function(response) {
            console.error(response.status);
        },

        success: function(response) {
            // Verify how to get image file name (Should be in the response)
            var source = response.data;
            reloadBackground(source);
        }
    });
});

});

【讨论】：

如果我不添加时间戳，就像你建议的那样，图像根本不会重新加载。如果我保留时间戳但使用由新图像替换的图像标签，则与以前的问题相同，即显示的图像始终是先前上传的图像。还是谢谢！

【解决方案3】：

哦。我发现了问题：

上传图片后，我使用 lwip 库来缩放图片并将其保存到目标路径。这最多可能需要两秒钟，但 ajaxSubmit() 的成功回调当然会在图像上传后立即调用。

所以我想我可以在上传文件夹中以原始名称保留图像的副本，或者我找到一种方法告诉客户端在图像被处理并写入其目标路径后立即重新加载图像.

【讨论】：