Question

我有以下标记：

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

我希望在上传新图片后立即重新加载背景图片。我在图片网址上添加了一个时间戳，以强制重新加载。

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

Answer 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就绪功能

之外

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

}）;

Answer 3

D'哦。我发现了问题：

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

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

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

3 个答案: