My goal is to select a photo from a folder and display it on a webpage, but I have struggled to find a working solution. Can this be achieved using just basic HTML, CSS, and JS? I am new to web development, so please forgive me for any beginner questions.
Below is the code I have been working with:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styleTake2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
function getImage(input){
if(input.files && input.files[0]){
var reader = new FileReader();
reader.onload = function (e) {
$('#placeholder')
.attr('src', e.target.result)
.width(150)
.height(200);
};
}
reader.readAsDataURL(input.files[0]);
}
</script>
</head>
<header>
<img src="assets/logo.png" class="logo">
<ul class="top-bar">
<li class="top-button">
<i class="fa fa-upload"></i>
<input id="uploadFile" type="file" onchange="readURL(this);" />
</li>
<li class="top-button">
<i class="fa fa-save"></i>
<button id="btnSave">Save image</button>
</li>
</ul>
</header>
<body>
<ul class="side-bar">
<hr width="199px" style="margin-top:0px;">
<li class="side-button">
<i class="fa fa-magic"></i> Effects
</li>
<hr width="199px">
<li class="side-button">
<i class="fa fa-volume-off"></i> Sounds
</li>
<hr width="199px">
<li class="side-button">
<i class="fa fa-image"></i> Select background
</li>
<hr width="199px">
</ul>
<img id="placeholder" src="#" alt="asdf" />
</body>
</html>
I prefer to understand the code rather than blindly copying and pasting it, so I appreciate any explanations or guidance you can provide.