I am currently working on creating a form that takes in a .png file and stores it in a database. Is there a way to display the image on the frontend immediately after the user selects the .png from their file explorer without reloading the page or submitting the form? i.e., can the image be displayed immediately following selection without any backend interaction?
Boiling it down to the simplest components, I'm looking for something where the image is displayed in a div above the image input:
<div id="SelectedImage">Selected Image:</div>
<input id="pngFile" type="file" />
Thanks in advance.
Hello you can do it with jQuery, for example:
function img_pathUrl(input){
$('#img')[0].src = (window.URL ? URL : webkitURL).createObjectURL(input.files[0]);
}#img {
background: #ddd;
width:100px;
height: 90px;
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="img">
<br>
<input type="file" id="img_file" name="img_file" onChange="img_pathUrl(this);">Adapt it to your needs.