jQueryで画像プレビュー機能を実装

jQueryで画像プレビュー機能を実装する方法を記します。

プレビューというのは「ファイルを選択」後すぐに、ブラウザ上に表示することを指しています。

Contents

実装イメージ
HTML
jQuery
ソースコード全文

実装イメージ

下記のようにファイルをアップロードしたら、すぐ下にプレビュー画像を表示するイメージになります。

HTML

HTMLでファイルアップローダーとプレビュー領域を用意します。
jQueryもCDNで読み込んでおきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="file" class="preview-uploader">
<div class="preview" style="width:300px;"></div>

jQuery

アップロードされたファイルの読み取りにはFileReaderクラスを使用します。
意外とシンプル。やっていることはコメントの通りになります。

$(document).on("change",".preview-uploader",function(){
    let elem = this                                             //操作された要素を取得
    let fileReader = new FileReader();                          //ファイルを読み取るオブジェクトを生成
    fileReader.readAsDataURL(elem.files[0]);                    //ファイルを読み取る
    fileReader.onload = (function () {                          //ファイル読み取りが完了したら
        let imgTag = `<img src='${fileReader.result}'>`         //img要素を生成
        $(elem).next(".preview").html(imgTag)                   //画像をプレビュー
    });
})

ファイルアップローダーをいくつ増やしても問題なく動きます。
下のデモで動きをご確認頂けます。

特定の拡張子のファイル以外をアップロードさせたくない場合もあると思います。
必要あらば下記の記事もご参照ください。

jQueryでアップロードファイルの種類を制限する

ソースコード全文

最後にソースコードを全文載せておきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="file" class="preview-uploader">
<div class="preview" style="width:300px;"></div>

<script>
    $(document).on("change",".preview-uploader",function(){
        let elem = this                                             //操作された要素を取得
        let fileReader = new FileReader();                          //ファイルを読み取るオブジェクトを生成
        fileReader.readAsDataURL(elem.files[0]);                    //ファイルを読み取る
        fileReader.onload = (function () {                          //ファイル読み取りが完了したら
            let imgTag = `<img src='${fileReader.result}'>`         //img要素を生成
            $(elem).next(".preview").html(imgTag)                   //画像をプレビュー
        });
    })
</script>

以上、jQueryで画像プレビュー機能を実装する方法でした。