[JS]画像ファイルアップロード前にプレビューを表示する

Facebook にシェア
Delicious にシェア
LINEで送る
Pocket

HTML 5 で追加された FileReader を利用すると JavaScript からローカルファイルの一部にアクセスすることができるようになります。一般的にはアップロードするファイルを事前にプレビューするなどの用途でよく使われます。
下記サンプルはファイル選択時に画像プレビューを表示するプログラムです。
古いブラウザでは FileReader が利用できないためその場合は何もしない点に注意して下さい。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Preview Demo</title>
    <script>
    document.addEventListener('DOMContentLoaded', function(){
        // アップロードボタン
        var fileSelector = '.image-upload';
        
        // プレビュー画像のクラス名
        var previewSelector = '.preview';

        // プレビューするファイルタイプ
        var fileTypes = [
            'image/jpeg', 'image/jpg', 'image/png',
            'image/gif', 'image/bmp'
        ];

        if( typeof FileReader == 'undefined' ){
            return;
        }

        var reader = new FileReader();

        reader.addEventListener('load', function(event) {
            preview.setAttribute('src', event.target.result);
        });

        var fileInputs = document.querySelectorAll(fileSelector);

        for(var i = 0; i < fileInputs.length; i++){
            var fileInput = fileInputs[i];
            var input = fileInput.querySelector('input');
            var preview = fileInput.querySelector(previewSelector);

            if(!preview) return;
            preview.setAttribute('data-fallback-src', preview.getAttribute('src'));

            input.addEventListener('change', function(){
                if(input.files && input.files[0] && fileTypes.indexOf(input.files[0].type) >= 0) {
                    reader.readAsDataURL(input.files[0]);
                } else {
                    preview.setAttribute('src', preview.getAttribute('data-fallback-src'));
                }
            });
        }
    });
    </script>
    <style>
    .image-upload .preview {
        display: block;
        width: 100%;
        max-width: 100px;
        height: auto;
    }
    </style>
</head>
<body>
    <div class="image-upload">
        <img class="preview" src="noimage.jpg" alt="Preview">
        <input name="image" type="file">
    </div>
</body>
</html>


Similar Posts:




  • This entry was posted in JavaScript and tagged . Bookmark the permalink.

    コメントを残す

    メールアドレスが公開されることはありません。