I am working on a rudimentary site that enables users to upload images to the server and download them from it. I want to add a "preview" feature that will allow the user to see its photo beforehand. Here is my code:
<div class="container">
<input type="file" class="title3" id="picker"/>
<img src= this.input alt="IDK why, but I can't display that." class="title3">;You can use JavaScript to dynamically update the image source of the img tag.
const img = document.getElementById('preview');
const input = document.getElementById('picker');
input.onchange = function(ev) {
const file = ev.target.files[0]; // get the file
const blobURL = URL.createObjectURL(file);
img.src = blobURL;
}<div class="container">
<input type="file" class="title3" id="picker" />
<img id="preview" alt="IDK why, but I can't display that." class="title3" width="200">
</div>I updated the code.
const selectFile = evt => {
const [file] = evt.target.files;
if (file) {
document.getElementById('preview').src = URL.createObjectURL(file);
}
}<div class="container">
<input type="file" class="title3" id="picker" onchange="selectFile(event)" />
<img id="preview" alt="IDK why, but I can't display that." class="image">;
</div>