The output image does not appear

Question

 <form action=""> <h2>Fill out the following details: </h2> <div class="inp"> <label for="name">Name: </label> <input type="text" id="name"> </div> <br> <div class="inp"> <label for="rollno">Roll No: </label> <input type="text" id="rollno"> </div> <br> <div class="inp"> <label for="image">Image: </label> <input type="file" id="image" accept="image/jpeg"> </div> <input type="button" id="submit" value="Submit"> </form> <div id="output"> <h2>Your Details: </h2> <div class="out">Name: <span id="outname"></span></div> <div class="out">Roll No: <span id="outrollno"></span></div> <div class="out">Image: <img id="outimage" width="200px"></div> </div> <script type="text/javascript"> function displayImage() { var x = document.getElementById("outimage"); var y = document.getElementById("image").src; x.setAttribute("src",y); } document.getElementById("submit").onclick = function() { document.getElementById("output").style.display = "block"; document.getElementById("outname").innerHTML = document.getElementById("name").value; document.getElementById("outrollno").innerHTML = document.getElementById("rollno").value; displayImage(); } </script>

Can someone tell me why is this happening? The image is in the same folder as the HTML file. Is there a better way to achieve this? I want to display the image that is selected in the form by the user.

Answer 1

You need to make sure that you read the content of the image file which is being uploaded. use filereader and then readAsDataURL and once the content is loaded by filereader assign that as source to preview image placeholder.

 function readURL() { // just to avoid the error since i dont know what readURL is doing nor it is mentioned in the OP. } function displayImage() { var x = document.getElementById("outimage"); var file = document.getElementById('image').files[0] var fr = new FileReader() fr.readAsDataURL(file) fr.onload = function(e) { x.setAttribute("src", this.result); } } document.getElementById("submit").onclick = function() { document.getElementById("output").style.display = "block"; document.getElementById("outname").innerHTML = document.getElementById("name").value; document.getElementById("outrollno").innerHTML = document.getElementById("rollno").value; displayImage(); }

 <form action=""> <h2>Fill out the following details: </h2> <div class="inp"> <label for="name">Name: </label> <input type="text" id="name"> </div> <br> <div class="inp"> <label for="rollno">Roll No: </label> <input type="text" id="rollno"> </div> <br> <div class="inp"> <label for="image">Image: </label> <input type="file" id="image" accept="image/jpeg" onchange="readURL(this)"> </div> <button type="button" id="submit">Submit </button> </form> <div id="output"> <h2>Your Details: </h2> <div class="out">Name: <span id="outname"></span></div> <div class="out">Roll No: <span id="outrollno"></span></div> <div class="out">Image: <img id="outimage" width="200px"></div> </div>