Как загрузить изображения после их загрузки на сервер и сохранить URL-адрес в базе данных mysql

Я создаю этот код для загрузки файла с моей веб-страницы. Цель состоит в том, чтобы переместить изображение на серверную сторону и сохранить его имя в базе данных mysql. С помощью следующего кода я могу переместить на сервер загруженные изображения и сохранить в базе данных mysql необходимую мне информацию. Теперь проблема в следующем: когда я снова открываю веб-страницу, я должен отображать также ранее загруженные изображения, но я не могу этого сделать.

<script>
    $(document).ready(function() {
        if (window.File && window.FileList && window.FileReader) {
            $("#randomImages").on("change", function(e) {
                //alert("onchange");
                var files = e.target.files,
                filesLength = files.length;
                //alert(files);
                for (var i = 0; i < filesLength; i++) {
                    var f = files[i]
                    var fileReader = new FileReader();
                    fileReader.onload = (function(e) {
                        var file = e.target;
                        $("<span class=\"pip\">" +
                            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
                            "<br/><span class=\"remove\">Rimuovi</span>" +
                            "</span>").insertAfter("#randomImages");
                            $(".remove").click(function(){
                            $(this).parent(".pip").remove();
                        });
          
          // Old code here
          /*$("<img></img>", {
            class: "imageThumb",
            src: e.target.result,
            title: file.name + " | Click to remove"
          }).insertAfter("#files").click(function(){$(this).remove();});*/
          
                    });
                fileReader.readAsDataURL(f);
            }
        });
    } else {
        alert("Il browser corrente non supporta il caricamento immagini")
    }
    });
</script>
<style>
        input[type="file"] {
          display: block;
        }
        .imageThumb {
          max-height: 75px;
          border: 2px solid;
          padding: 1px;
          cursor: pointer;
        }
        .pip {
          display: inline-block;
          margin: 10px 10px 0 0;
        }
        .remove {
          display: block;
          background: #444;
          border: 1px solid black;
          color: white;
          text-align: center;
          cursor: pointer;
        }
        .remove:hover {
          background: white;
          color: black;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <div class="field" align="left">
          <h3>Carica le immagini</h3>
          <input type="file" id="randomImages" name="randomImages[]" multiple />
        </div>

Я использую php в качестве языка.