JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2017年03月 / 10月<< 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>11月

アクセスランキング

[ジャンルランキング]
コンピュータ
364位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
46位
アクセスランキングを見る>>

input type="file"の隣に画像のプレビューを表示する

input type="file"を探して勝手に画像のプレビューを表示するスクリプトです。
画像じゃなくてもプレビューを出そうとしますが、まあそれはちょこっと弄れば直せるはずです。ファイル名をチェックするとかですかね。

(function() {
  if (typeof FileReader == "undefined") return;
  document.addEventListener("DOMContentLoaded", function() {
    var images = [];
    Array.prototype.forEach.apply(
      document.getElementsByTagName("input"), [
        function(input, index) {
          if (input.type != "file") return;
          var image = document.createElement("img");
          image.width = 150;
          input.parentNode.insertBefore(
            image,
            input.nextSibling
          );
          images[index] = image;
          input.addEventListener("change", function() {
            if (!input.files[0]) return;
            var reader = new FileReader();
            reader.addEventListener(
              "load",
              function() {
                images[index].src = this.result;
              },
              false
            );
            reader.readAsDataURL(input.files[0]);
          }, false);
        }
      ]
    );
  }, false);
})();

割と使い所がありそうなのであげておきました。参考までに。
 


 
   JavaScript    TB(0)    CM(0)    EDIT    ページ↑

コメント投稿


 管理者だけに表示

コメント

トラックバック

この記事へのトラックバック:

プロフィール

JDB Luigi

Author:JDB Luigi
どこにでもいるようなありふれた人間・・・という訳でもなく、かと言って怪しい宗教を信仰する変人という訳でも無い。

基本的に掲載しているコード等は煮ていただいても焼いていただいても結構ですが、利用は自己責任にてお願いいします。
また、バグ・アドバイス等もしあればよろしくお願いします。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。