前回は、＜input type = “file”＞で選択するボタンの装飾について説明しました。
詳しくは、こちらをご覧ください。

ファイルを選択するボタンの画像やスタイルを設定する方法＜input type="file"＞

input要素において、「確認する」ボタンを でsrc属性に画像のパスを設定すると、「確認する」ボタンを画像に設定することができます。しかし、ファイルを選択するinput要素では、既にtype = "file"が設定されているため、少し工夫が必要になります！今回は選択ボタンの画像やスタイルの変更をいく...

nyanblog2222.com

2020.06.03

今回はinput要素で読み込んだ画像を表示させてみようと思います。
それでは、img要素とdiv要素それぞれのパターンでみていきましょう。

【サンプル1】img要素に出力

まずは、img要素に出力してみます。
input要素、type=”file”では、ファイルを選択後、onchangeのイベントが呼ばれます。
JavaScriptでは、on(“change”, function())関数です。

HTMLではinput要素とimg要素を宣言します。

<input type="file" id="input1"/>
<img id="sample1">

JavaScriptに1～4の内容を記述します。

1. ファイル選択後に呼ばれるイベントを記述
2. イベント内で画像ファイルの読み込みクラスを設定
3. 読み込みクラスの準備が終わったらimg要素のsrc属性に画像ファイルの情報を設定
4. 読み込んだ画像ファイルをURLに変換

// 1. ファイル選択後に呼ばれるイベント
$("#input1").on("change", function (e) {

    // 2. 画像ファイルの読み込みクラス
    var reader = new FileReader();

    // 3. 準備が終わったら、id=sample1のsrc属性に選択した画像ファイルの情報を設定
    reader.onload = function (e) {
        $("#sample1").attr("src", e.target.result);
    }

    // 4. 読み込んだ画像ファイルをURLに変換
    reader.readAsDataURL(e.target.files[0]);
});

【サンプル2】div要素に出力

次はdiv要素に画像ファイルを出力してみます。
JavaScriptの記述方法も変えてみました。

先ほどと異なり、input要素のonchange属性にOutputImage関数を設定しています。

<input type="file" id="input2" onchange="OutputImage(this);"/>
<div id="sample2"></div>

JavaScriptではサンプル1と同様、ファイル読み込みクラスを使用して、画像を表示させます。
サンプル1と異なるのはImageクラスを使って、heightとwidthの設定を追加しています。

1. input要素のonchange属性に関数を設定
2. イベント内で画像ファイルの読み込みクラスを設定
3. 読み込みクラスの準備が終わったら画像の情報を設定
4. Imageクラスに読み込んだ画像の情報を設定し、div要素に読み込んだ画像の縦・横のサイズを設定
5. backgroundスタイルを設定
6. 読み込んだ画像ファイルをURLに変換

// 1. onchange属性に設定した関数
function OutputImage(target)
{
    // 2. ファイル読み込みクラス
    var reader = new FileReader();

    // 3. 読み込みクラスの準備が終わった後、画像の情報を設定
    reader.onload = function () {
        $sample2 = $("#sample2");

        // 4. Imageクラスを使ってdiv要素に画像のheightとwidthのサイズを設定
        img = new Image();
        img.src = this.result;
        img.onload = function() {
            $sample2.css("width", img.naturalWidth);
            $sample2.css("height", img.naturalHeight);
        }
        // 5. backgroundスタイルを設定
        $sample2.css("background", "url(" + this.result + ") center center / contain no-repeat");
    }
    // 6. 読み込んだ画像ファイルをURLに変換
    reader.readAsDataURL(target.files[0]);
}

デモ

こちらがサンプル1とサンプル2のデモです。
内容は一緒ですが、出力方法や要素がimgかdivであることが異なります。

サンプル1

サンプル2

まとめ

今回はinput type=file要素で取得した画像ファイルを出力する方法を説明していきました。
divに関して、今回例で試してみただけなので、別の要素でも試してみてください。
次回は複数ファイルを読み込んで出力してみましょう。

本記事をご覧いただきありがとうございました。

投稿 ＜input type=”file”＞で読み込んだ画像を表示させよう【JavaScript】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。