// HTML
<form>
  <label for="image_file" name="image_file">画像ファイル:</label>
  <input id="image_file" type="image" name="image_file"/>
  <input id="image_file_btn" type="button" name="image_file_btn" />
</form>
<hr/>
<img id="result_img" alt="空" />

// JS
let imgFileElem = document.getElementById("image_file")
let imgFileReader = new FileReader()

// 読み込み成功時のイベント
imgFileReader.addEventListener('load', () => {
  let imgElem = document.getElementById("result_img")
  imgElem.src = imgfileReader.result
}, false)

// ファイルUpload時のイベント
let imgFileElem = document.getElementById("image_file")
imgFileElem.addEventListener('click', () => {
  // Step1. バイナリデータをBase64にエンコード
  // Step2. Base64文字列をURL文字列(%文字列)にエンコードしてURL文字列として読み込む(DataURL形式)
  // e.g. data: image/jpeg;base64, ROIGODlh....==
  imgFileReader.readAsDataURL(imgFileElem.files[0])
}, false)