htmlフォームファイルタイプからモーダルウィンドウで画像を開く方法

Question

フォームファイルから画像を選択すると、どのように画像をモーダルポップアップウィンドウで開くことができますか？

<input type="file" class="form-control"> 

Answer 1

あなたは、入力フィールドからのBase64を取得し、あなたのモーダルの内側に、<img>要素に付加することができます。詳細は以下のリンクをご覧ください。

FileReader.readAsDataURL()

Answer 2

あなたはfancyboxを使用することができますが、あなたは、base64を使用する場合は、次のように...あなたはイメージのため、いくつかの設定を設定する必要がエンコード：

 <script type="text/javascript"> 
    $(document).ready(function() { 
     $('.fancybox-cs').fancybox({ 
     type  : 'image' 
     }); 
    }); 
    </script>