show image and title , when button click in JavaScript-CodePudding

I want to show an image and a title when I click the button. I created a form to do it. It's only working to show "Title". Image is not showing. Here is the my code, please help me.

function showImage()
    {
        document.getElementById('showTitle').innerHTML=document.getElementById('imgTitle').value;
        document.getElementById('showImage').innerHTML=document.getElementById('imagP').value;
    }

<!-- Input Area-->

<input type="text" id="imgTitle"/>

<input type="file" id="imagP"/>

<button onclick="showImage()" >Show Image</button>


<!-- Show Image & Title-->

<p id="showTitle"></p>

<img src="" id="showImage">


<!-- JavaScript Code-->

CodePudding user response：

You need to use FileReader to read the uploaded file.

function showImage() {
  document.getElementById('showTitle').innerHTML=document.getElementById('imgTitle').value;
  var preview = document.querySelector('#showImage');
  var file    = document.querySelector('#imagP').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

<input type="text" id="imgTitle"/>

<input type="file" id="imagP"/>

<button onclick="showImage()" >Show Image</button>


<!-- Show Image & Title-->

<p id="showTitle"></p>

<img src="" id="showImage">

CodePudding user response：

here is we use fileChange function on each time you change file. and add style of display none to img tag where we want to show image, so we can show/hide image on Show Image button click.

let file = null;

function showImage() {
  document.getElementById('showTitle').innerHTML = document.getElementById('imgTitle').value;
  const showImage = document?.getElementById('showImage');
  showImage.style?.display = 'block';
  showImage.src = window?.URL?.createObjectURL(file);
}
const fileChange = (fileObj) => {
  document.getElementById('showTitle').innerHTML = '';
  const showImage = document.getElementById('showImage');
  showImage.style.display = 'none';
  file = fileObj.target.files[0]
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #editable {
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <input type="text" id="imgTitle" />

  <input type="file" id="imagP" onchange="fileChange(event)" />

  <button onclick="showImage()">Show Image</button>


  <!-- Show Image & Title-->

  <p id="showTitle"></p>

  <img src="" id="showImage" style="display:none">

</body>

</html>

CodePudding user response：

Simplest way to achieve it as below

 function showImage()
    {
        document.getElementById('showTitle').innerHTML=document.getElementById('imgTitle').value;
        
        if(document.getElementById('imagP').files[0] != null) {
            document.getElementById('showImage').src=URL.createObjectURL(document.getElementById('imagP').files[0]);
        } else {
            alert("please select the image")
        }
    }

<input type="text" id="imgTitle"/>

<input type="file" id="imagP"/>

<button onclick="showImage()" >Show Image</button>


<!-- Show Image & Title-->

<p id="showTitle"></p>

<img src="" id="showImage">