input type="file" でファイルの選択が完了すると change イベントが発生するのでそれにリスナをアタッチし、以下の処置を行うようにしてはいかがですか?
(1) input type="file" で選択された画像ファイルを FileReader オブジェクトに readAsDataURL メソッドを使って読み込む
(2) readAsDataURL メソッドは非同期で動くので、読み込み完了の onloadend イベントのリスナで FileReader から result プロパティで Data url を取得
(3) image オブジェクトを作ってその src 属性に Data url 設定
(4) image オブジェクトの src 属性に Data url が設定され画像のロードが完了すると onload イベントが発生するのでそのリスナで image オブジェクトの高さと幅を取得
【追記】
上の回答に書いたことをコーディングしたサンプルを載せておきます。
html
1<!DOCTYPE html>
2
3<html xmlns="http://www.w3.org/1999/xhtml">
4<head runat="server">
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6 <title></title>
7 <script type="text/javascript">
8 window.addEventListener('DOMContentLoaded', () => {
9 const inputFile = document.getElementById('img_id');
10 const resultDiv = document.getElementById("result");
11
12 inputFile.addEventListener('change', async () => {
13 // 選択された画像の Data url を取得
14 let dataUrl = await CreateDataUrl(inputFile.files[0]);
15
16 // 画像がロードされた img オブジェクトを取得
17 let img = await CreateImage(dataUrl);
18
19 resultDiv.innerText = `Size: ${img.width} x ${img.height}`;
20 });
21 });
22
23 // input type="file" から取得できる File オブジェクトを引数
24 // に渡す。FileReader オブジェクトを生成して readAsDataURL
25 // メソッドで Data url を生成し、resolve コールバックの引数
26 // に設定
27 const CreateDataUrl = file => {
28 return new Promise(resolve => {
29 const reader = new FileReader();
30 reader.addEventListener('loadend', e => resolve(e.target.result));
31 reader.readAsDataURL(file);
32 });
33 };
34
35 // 上のメソッドで生成された画像の Data url を引数に渡す。それ
36 // を img 要素の src 属性に代入。ロード完了後の img 要素を
37 // resolve コールバックの引数に設定
38 const CreateImage = dataUrl => {
39 return new Promise(resolve => {
40 const img = document.getElementById('picture_id');
41 img.addEventListener('load', e => resolve(e.target));
42 img.src = dataUrl;
43 });
44 };
45 </script>
46</head>
47<body>
48 <input type="file" id="img_id" />
49 <div id="result"></div>
50 <img id="picture_id" />
51</body>
52</html>
結果は:
