[js]input:fileで画像選択時にサムネ表示を仕込む

jQueryでやっていく。

動作イメージ
やっていく
参考
活用

動作イメージ

通常のinput:fileはファイルを指定してもファイル名が表示されるだけ。

対象がfileだから当然なんだけどね。

ファイルの種類を画像に絞るならサムネイルがほしいというか、一般的と言うか。

画像を指定したら指定した画像が表示されるギミックを仕込む。

表示だけでなくキャンセルした場合にも対応。

やっていく

こんなのがあったとして、.imgの中に画像を入れたい。

<dl id="form_image">
    <dt><label><span>画像1</span></label></dt>
    <dd><div class="img"></div><div class="input"><input type="file" name=""></div></dd>
    <dt><label><span>画像2</span></label></dt>
    <dd><div class="img"></div><div class="input"><input type="file" name=""></div></dd>
    <dt><label><span>画像3</span></label></dt>
    <dd><div class="img"></div><div class="input"><input type="file" name=""></div></dd>
    <dt><label><span>画像4</span></label></dt>
    <dd><div class="img"></div><div class="input"><input type="file" name=""></div></dd>
</dl>

こうなる。

$(function(){
    $('#form_image input[type="file"]').on('change', function (e) {
        var fileset = $(this).val();
        var place = $(this).closest('dd').find('.img');
        if (fileset === '') {
            place.empty();
        } else {
            var reader = new FileReader();
            reader.onload = function (e) {
                place.empty().append('<div class="inner"><img src="'+e.target.result+'"></div>');
            }
            reader.readAsDataURL(e.target.files[0]);
        }
    });
})

function()を無駄に増やすとデータの受け渡しがうまく行かずに迷子になるので注意。

画像非表示の際は当然.imgを空にする。

画像変更時は、表示の命令だけだと追記になるのでよろしくない。こちらも一度空にしてから挿入する流れになる。

参考

jQueryでinput[type=”file”]で画像アップロード時にプレビューを表示する

inputで画像アップロードするときに、jQueryで選択された画像をプレビューで表示するやり方です。画像選択画面で「キャンセル」を押された場合にも、添付されているか確認してプレビューのオンオフ処理する方法。また、ファイル選択必須・

似たような記事が色々ある中、シンプルかつ機能が十分な組み方はこれだった。

画像設置の仕様が違うので一部変更しなきゃだった。

で、今回知ったことは、画像パスを引っ張ってきても画像は表示してくれないということ。

'<img src="'+$('input[type="file"]').val()+'">';

パスがfakepathに置換されて、表示だけでなく動作にも影響するからっぽいですね。

活用

今回はサムネ表示に焦点を当ててるので、アップできるファイルの制御は割愛してある。ファイルサイズやファイル形式を指定する条件分岐をラッピングするなり処理の中断を噛ませるなりでやっていけばいいと思います。