webデザインの作業中にちょっと画像の内容を確認したいときがあります。画像加工ソフトや、閲覧ソフトを立ち上げるほどでもないときに、ブラウザの別タブから画像を選んでサムネイル表示させるhtmlを作成してみました。もちろん送信する仕組みを入れればそのままアップロードも可能です。

動作確認は、MacのChromeで行いました。古いSafariではうまく動作しません。

使い方:selectから表示サイズを決めて、「ファイルを選択」ボタンをクリックして、自分のPCの中の画像を選びます。画像の選択は複数可能で、画像の大小に関わらず縦サイズを固定して並べていきます。表示される画像名は最後に選択したものになります。また、後からサイズ変更も可能です。「height:auto」を選ぶと、元画像の実寸表示になります。
 表示サイズ(height)変更