Javascript 如何在使用函数替换的div中“保存”特定图片？

我从这个网站上回答的另一个问题中得到了代码。但我想要的是，我想做一个按钮，将新上传的图片保存在div中。就像我刷新页面一样，新上传的图片在那里，而不是旧图片

HTML:

---

在这段代码中，当我上传picture image.jpg时，它会将picture anonymous.png替换为image.jpg。现在我想要的是，当图片被更改时，它将是永久的，就像我刷新页面时，转到另一个页面，然后再返回，除非我想再次更改它。它必须类似于facebook、twitter等网站中的更改配置文件图片功能。

您必须将其保存到db或一个文件中，可能……您称之为php的内容与javascript非常相似：您可以使用php检查image.jpg是否存在，然后最初使用它而不是anonymous.png。。。或者使用php会话来检测用户之前是否上传了图像您需要使用php将文件保存到特定位置。看看PHP的上传教程。如果您将新图像命名为与旧图像相同的名称，它将覆盖它，并且您不必更改标记中的src属性。

   <div id="profilepic">
        <img src = "Anonymous.png" class = "profilepic" height="200px" width="200px"><br/>
    </div>
    <form id="changepic">
    <br/><input id="file" type="file" name="files[]" onchange="readURL(this)"><br/>
    </form>

    $(".imageSection button").click(function() {
        $(".imageSection img").removeClass("activeImage");
        $(this).parent().find("img").addClass("activeImage");
    });
    $(".imageSection:eq(0) img").addClass("activeImage");

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('.profilepic,.activeImage').attr('src', e.target.result).width(200).height(200);

                $('.activeImage').css('display', 'inline');
            };

            reader.readAsDataURL(input.files[0]);
        }
    }