input[type=”file”]で選択した画像をimg要素で表示する

流れ：

・要素の上で右クリックしメニュー表示
・メニューで画像をクリック　
・ファイル選択ダイアログが表示される
・ファイルを選択
・ファイルを選択したあと、要素をクリックした位置に画像が表示される。

問題点：

・ファイル選択→要素をクリックで画像設置。再度クリックするとまた画像が移動する(クリックするたびに設置した画像が移動する）

・メニュー項目「画像」を選択する前から要素をクリックするとimg要素の枠線が表示されてしまう。

・画像を一枚だけしか表示できない。

やりたいこと：

・一度クリックして画像を設置したら、クリックイベントで画像の移動は行わない様にしたい(一度クリックした時点で設置完了とする)

・画像が複数設置できるようにしたい(ファイル選択→画像設置の流れで、画像を複数設置できるようにしたい)

・メニュー項目の「画像」を選択してからでないと画像設置イベントが起きない様にしたい（上記問題点のimg要素が表示されるのを改善したい)
下記ソースコードだと、

picture.onclick = () => {
select.click();
}
のイベントが起きるまでは、

element.onclick = (e) => {
element.appendChild(image2);
image2.style.position = 'absolute';
..................
}
のイベントが起きない様にしたい。

ご教示宜しくお願い致します。

全体ソースコード

https://codepen.io/mio-rei/pen/JjEVMNm

ソースコード：

JavaScript
1//画像メニュー　画像の挿入
2   const picture = document.querySelector('.picture');
3   const select = document.querySelector('.myImage');
4   const image2 = document.createElement('img');
5   var reader = new FileReader(); 
6   
7   picture.onclick = () => {
8       select.click();
9   }
10   
11   select.onchange = function(e) { 
12       reader.readAsDataURL(e.target.files[0]);
13   }
14     
15   element.onclick = (e) => {
16       element.appendChild(image2);     
17       image2.style.position = 'absolute';
18       image2.style.width = 300 + 'px';
19       image2.style.height = 200 + 'px';
20       image2.style.left = e.clientX - element.getBoundingClientRect().left + 'px';
21       image2.style.top = e.clientY - element.getBoundingClientRect().top + 'px';
22       image2.setAttribute('src', reader.result);         
23   }

行動規範の内容に同意します

回答1件

ベストアンサー

検証はしていないですが、以下のような感じでできると思います。

JavaScript
1var reader;
2
3select.onchange = function(e) {
4    reader = new FileReader(); 
5    reader.readAsDataURL(e.target.files[0]);
6}
7
8element.onclick = (e) => {
9    if (reader) {
10        const image2 = document.createElement('img');
11        ...
12        reader = null;
13    }
14}