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.

This is the output that I'm getting

you need to read the file and then set the source in preview image src. — sandeep joshi, Oct 13 '20 at 17:25
Does this answer your question? [How to display selected image without sending data to server?](https://stackoverflow.com/questions/17138244/how-to-display-selected-image-without-sending-data-to-server) — imvain2, Oct 13 '20 at 17:28

score 1 · Accepted Answer · answered Oct 13 '20 at 17:32

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>

The output image does not appear

1 Answers1