【haml】画像プレビュー 方法(コピペOK)

3387 ワード
Rails haml JavaScript JavaScript テキストリンク

画像のプレビュー

javascriptを使用して、ページを遷移すること無く、画像のプレビューをする
※ファイル選択を出来る状態にする必要がある

見 本

実際のコード

haml
%img{id:"image-file"}
      :javascript
        document.addEventListener('change', function(e){
          var file = e.target.files[0];
          var fileReader = new FileReader();
          fileReader.onload = function() {
            var dataUri = this.result;
            var img = document.getElementById('image-file');
            img.src = dataUri;
          }
          fileReader.readAsDataURL(file);
        });

各コードの内容

  • addEventListener さまざまなイベント処理を実行することができるメソッド

  • document Chrome等のブラウザ上で表示されたドキュメントを操作する事

  • change 値が変化した後に発火

  • e.target.files[0] で選択されたファイルを取得

  • FileReader ユーザーのコンピューター内にあるファイルをウェブアプリケーションから非同期的に読み込むことが出来る。

  • result ファイルの内容を返す

  • getElementById 指定されたidの属性を持つ、要素の参照を返します

  • readAsDataURL FileReaderのメソッドです。ファイルを、Data URIとして読み込むメソッドです。例えば画像ファイルをこのメソッドで読み込んで、読み込んだデータをimg要素のsrc属性に指定すればブラウザに表示できます。