しょぼしょぼプログラマ雑記

自分のための備忘録。 開発記録など掲載してます。 質問・ご意見・ご感想等はTwitter ( https://twitter.com/yun_hokuto ) までお気軽にどうぞ。

jQueryを使ったファイルアップロード前のサムネイル表示 (追記:2015/04/14)

jQuery便利ですね

その便利な機能+FileAPIを使って、アップロードする前にファイルのサムネイルを表示する方法を簡単に記述していきます

各種バージョン
jQuery2.1.3

まずは率直にソースコード公開

<html lang="ja">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
        <meta charset="UTF-8">
        <title>jQuery upload</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script>
            $(function() {
                var init = function() {
                    // 選択後イベント
                    $('input[name="files[]"]').change(function(evt) {
                        $('div#file_list').text('');

                        jQuery.each(evt.target.files, function() {
                            // サムネイル画像生成
                            var reader = new FileReader();
                            reader.readAsDataURL($(this)[0]);
                            reader.onloadend=function(){
                                $('div#file_list').append($('<img />').attr('src', this.result));
                            };

                            // ファイル名表示
                            $('div#file_list').append($(this)[0].name+'<br />');
                        });
                    });
                }
                init();
            });
        </script>
    </head>
    <body>
        <form enctype="multipart/form-data" method="post" action="アップロード先ファイル名">
            <input type="file" name="files[]" multiple accept="image/jpeg,image/png" />
            <input type="submit" value="送信" />
        </form>
        <div id="file_list"></div>
    </body>
</html>

そして説明

まず動きですが、ファイル選択後のイベントには「change」を使用

ここで簡単な注意を一つ

ファイル選択の中身が変更されたらchangeイベントが発生する

当たり前な話ですが前置き

そしてイベント内ではFileAPIを使用して、選択されたファイル一覧を取得

さらに、FileAPIの中の一つ「FileReader」を使用して、選択されたファイル情報から画像を表示

あとはオマケでファイル名を表示しています

やっていることはすごく単純

GoogleホスティングサービスからjQueryを持ってきているので、インターネットにつながっている人ならコピペで動くよ!!!

あと、地味に複数ファイルアップロードに対応させてます

FileAPIはテキストの中身だったり、バイナリだったりも操作できるみたいですので、やり方ひとつでいろいろ出来そうです


2015/04/14 追記

FileReaderで読み込んだ後の「this.result」ですが、iOS8.0で読み込むとnullが返ってきます

どうやらこれはOS側の不具合のようです

詳細は下記サイト様参照

blog.htmlhifive.com

iOS8.0.2で修正されたようですが、この回答に至るまで謎でした