テクノモンキーのアプリ開発日記

テクノモンキーの開発ブログです。iOS、Android、Unity、Cocos2d-xなどアプリ開発関連のTipsやアプリ開発に役立つ情報を発信します。

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で選択した画像ファイルをアップロード前にページ上で表示する方法(HTML・JavaScript)

PC側でファイルを選択すると、ウェブページ上で選択した画像が表示されます。
PCで選択した画像ファイルをアップロード前にページ上で表示する方法(HTML・JavaScript)

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