Javascript 上载后强制重新加载图像显示以前上载的图像

我有以下标记：

用户可以选择一个照片资源，该资源将上载到服务器，并在表单顶部显示为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>

问题是：

第一次选择并上传新图像时，背景图像不会改变。选择另一张照片后，背景图像将更改为显示之前上载的照片等。但是，如果手动重新加载页面，将显示正确的（即上次上载的）图像。似乎调用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();
        }
    });
});

---

将此部分从

文档

就绪功能中删除

尝试仅从服务器返回文件名，并使用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>

---

}))

D'oh。我发现了问题：

上传图像后，我使用lwip库缩放图像并将其保存到目标路径。这可能需要两秒钟的时间，但是一旦上传了图像，就会调用ajaxSubmit（）的成功回调

---

因此，我想我可以在上载文件夹中以原始名称保存一份图像副本，或者我可以找到一种方法，让客户端在处理图像并将其写入目标路径后立即重新加载图像。

谢谢您提供的提示，但这没有什么区别。如果我没有像您建议的那样添加时间戳，图像根本不会重新加载。如果我保留了时间戳，但使用了一个被新图像替换的图像标记，则问题与以前相同，即显示的图像始终是先前上载的图像。无论如何谢谢你！

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());
}

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

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);
        }
    });
});