tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

【javascript】JavaScriptでFileReaderを使った画像プレビュー

inputで画像選択した後、
その画像をプレビューとして表示する方法についてまとめていきたいと思います。

FileReader を使ってプレビュー表示する

下記がプレビューを表示するコード

<input type="file" accept='image/*' multiple="multiple" onchange="preview(this);">

<div id="preview"></div>

<script>
function preview(obj){
    for (i = 0; i < obj.files.length; i++) {
        var fileReader = new FileReader();
        fileReader.onload = (function (e) {
            document.getElementById('preview').innerHTML += '<img src="' + e.target.result + '">';
        });
        fileReader.readAsDataURL(obj.files[i]);
    }
}
</script>

multiple 属性

以下のようにmultiple="multiple"と記述すると
ファイル選択時に複数選択することが可能です。

<input type="file" name="image_file[]" multiple="multiple">

See the Pen input 複数ファイル選択 by たまき こう (@ulqvhvox) on CodePen.

File API と FileReader API なるものを利用しているらしいがすごく長くなりそうなのでまた明日。。

参考

https://www.codegrid.net/articles/fileapi-1/

File APIの画像プレビューをちゃんと理解する – へんな柳生