PCで選択した画像ファイルをアップロード前にページ上で表示する方法（HTML・JavaScript）

ウェブで使える便利ツールを作っている過程で、
「画像をサーバー上にアップロードする前にプレビュー表示」をしたいなと思ったので、試しにやってみました。

PCで選択した画像ファイルをアップロード前にページ上で表示する方法（HTML・JavaScript）

まず、コードは下記のような感じになりました。

<div id='boxImage'>画像表示領域</div>
    <input type='file' value='' id='selectImage'>
	<script type="text/javascript">
				var elm = document.getElementById("selectImage");
				elm.onchange = function(evt){
  				var selectFiles = evt.target.files;
  					if(selectFiles.length != 0) {
    					var fr = new FileReader();
    					fr.readAsDataURL(selectFiles[0]);
    					fr.onload = function(evt) {
    						
      						document.getElementById('boxImage').innerHTML = '<img src="' + fr.result + '" alt="" style="width: 50%;height: auto;border:1px solid #666;">'; 
    					}
  					}
				}
	</script>

ポイントとしては以下です。

• サーバー上にアップロードせず、ブラウザ上に選択した画像を表示させる

• HTMLとJSだけで動作可能

完成形の動作としては以下のような感じになります。

まず、Webページ上の「ファイル選択」ボタンをユーザーが選択すると、PC側のファイル選択画面を表示。

PC側でファイルを選択すると、ウェブページ上で選択した画像が表示されます。