local upload of images by path

Question

I have an image upload. When selecting some files from a filedialog, the files get added to an array and a new div container is added to the page. This div container contains the image and a delete button.

var imageList = [];

$("document").ready(function () {
    var dlgImageUpload = $("#inputUpload"); // the input dialog
    dlgImageUpload.click(function(){this.value = '';}); // reset the value
    dlgImageUpload.change(function (input) { // new images selected
        $(input.target.files).each(function (imageIndex, currentImage) {
            if (currentImage.type.match('image.*')){ // just execute the code if the file is an image
                addNewImage(currentImage.name); // handle the array and create a new container
            }
        });
    });
});

function initializeImageList(){ // load images already existing (from server?)
    $(imageList).each(function (imageIndex) {
        createImageContainer(imageIndex);
    });
}

function addNewImage(fileName){ // add the new image to the list and create it at the first place in the DOM
    imageList.unshift(fileName);
    createImageContainer(0);
}

function createImageContainer(imageListIndex){ // create a new div container for the image
    var uploadContainer = $("<div></div>"); // the parent container
    uploadContainer.addClass("uploadContainer");
    $('#ImageListContainer').append(uploadContainer);
    $(uploadContainer).insertBefore($(".uploadContainer")[0]);

    var btnBar = $("<div></div>"); // containing the delete button and other ones
    btnBar.addClass("uploadBtnBar");
    uploadContainer.append(btnBar);

    var btnDelete = $("<button></button>"); // the button for deleting the current image
    btnDelete.addClass("btn btnDark btnDeleteImage");
    btnDelete.click(function () {
        imageList.splice(imageListIndex, 1);
        uploadContainer.remove();
    });
    btnBar.append(btnDelete);

    var uploadedImage = $("<div></div>"); // the image container itself with a background image
    $(uploadedImage).css("background-image", "url('Resources/" + imageList[imageListIndex] + "')");
    uploadedImage.addClass("uploadedImage");
    uploadContainer.append(uploadedImage);
}

#ImageListContainer{
    margin-top: 50px;
}

#inputUpload{
    margin-left: 20px;
}

.uploadContainer{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 200px;
    height: 200px;
    margin: 20px;
}

.uploadContainer:hover .uploadBtnBar{
    display: block;
}

.uploadContainer:hover .uploadedImage{
    opacity: 0.3;
    transition: 1s;
}

.uploadedImage{
    width: 100%;
    height: 100%;
    background-size: cover;
    transition: 1s;
}

.uploadBtnBar{
    position: absolute;
    z-index: 1;
    display: none;
    width: 100%;
    text-align: right;
    height: 32px;
}

.btnDeleteImage{
    width: 32px;
    height: 32px;
    background-image: url("../../Resources/deleteImageBtn.png");
    background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="imageUpload" class="contentPage">
    <input class="input" id="inputUpload" type="file" multiple>
    <div id="ImageListContainer"></div>
</div>

and as you can see in the example mentioned above, the images are not found. So when writing $(uploadedImage).css("background-image", "url('Resources/" + imageList[imageListIndex] + "')");

My url is currently wrong. I search for existing images in this Resources folder. How can I upload images from where I want?

I know I can not read the path of the file due to security reasons. But how can I solve this problem?

The rest of the code should be fine, I just need to get the right url from the selected file.