フォームからファイルを選択した際に、submitする前にプレビュー表示する方法(jQuery"無し"版)

はじめに

フォームの入力の際に、入力に間違いがないかプレビュー表示する
この機能を実現するためにFileAPIを利用する
JavaScriptのFileAPIは2016年3月現在ほぼすべてのブラウザに対応している(IEさえも)

本サンプルコードはpureなJavaScriptのみでjQueryを使っておりません。

※前回書いた記事ではjQueryのセレクタやその他メソッドを使っていただ普通のJSだけで書いたらどうなるか気になったので書いてみた。

Demo

動作を確認できるデモはこちら
Demo

対象のコード

<form>
    <input type="file">
</form>

<div class="preview" />

// documentと毎回書くのがだるいので$に置き換え
var $ = document; 
var $form = $.querySelector('form');// jQueryの $("form")相当

//jQueryの$(function() { 相当(ただし厳密には違う)
$.addEventListener('DOMContentLoaded', function() {
    //画像ファイルプレビュー表示
    //  jQueryの $('input[type="file"]')相当
    // addEventListenerは on("change", function(e){}) 相当
    $.querySelector('input[type="file"]').addEventListener('change', function(e) {
        var file = e.target.files[0],
               reader = new FileReader(),
               $preview =  $.querySelector(".preview"), // jQueryの $(".preview")相当
               t = this;
        
        // 画像ファイル以外の場合は何もしない
        if(file.type.indexOf("image") < 0){
          return false;
        }
        
        reader.onload = (function(file) {
          return function(e) {
             //jQueryの$preview.empty(); 相当
             while ($preview.firstChild) $preview.removeChild($preview.firstChild);

            // imgタグを作成
            var img = document.createElement( 'img' );
            img.setAttribute('src',  e.target.result);
            img.setAttribute('width', '150px');
            img.setAttribute('title',  file.name);
            // imgタグを$previeの中に追加
            $preview.appendChild(img);
          }; 
        })(file);
        
        reader.readAsDataURL(file);
    }); 
});