前回は、＜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 ~にゃんぶろぐ~ に最初に表示されました。

input要素において、「確認する」ボタンを ＜input type = “image”＞ でsrc属性に画像のパスを設定すると、「確認する」ボタンを画像に設定することができます。

しかし、ファイルを選択するinput要素では、既にtype = “file”が設定されているため、少し工夫が必要になります！
今回は選択ボタンの画像やスタイルの変更をいくつかの方法でご紹介します。

【サンプル1】ボタンを画像に設定する

ボタンを画像にする方法について、
HTMLでは、input要素をlabel要素で囲みます。

<label id="sample1">
   <input type="file"/>
</label>

CSSでlabel要素に画像を設定します。
他にもサイズやポインタなど、スタイルを変更しておきましょう。

デフォルトでinput要素はボタンが出力されるので、display: none; で表示を消しておきます。

また、hoverの疑似クラスで別の画像を設定しておくと、少し動きが出ますね。

#sample1 {
    // サイズを設定
    height: 54px;
    width: 150px;

    // ボタンにする画像を設定
    background: url(../img/sample1.png) center center / contain no-repeat;

    // インラインボックスに設定
    display: inline-block;
    // マウスカーソルを当てた時、ポインタに設定
    cursor: pointer;
}

#sample1:hover {
    background: url(../img/sample1_hover.png) center center / contain no-repeat;
}

#sample1 input{
    // デフォルトのinputは出力なし
    display: none;
}

また、今回はサンプルなので簡単な画像なのですが、
この程度の画像の動きであればスタイルでも実現可能です。

ボタンのスタイルを変更

【サンプル2】<label>で囲んでスタイルを設定

先ほどの画像の設定と同様にinput要素をlabel要素で囲みます。

<label id="sample2">
   <input type="file"/>
</label>

続いて、今度はlabel要素をCSSで設定していきます。

#sample2 {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  background: #00BCD4;/*背景色*/
  color: #00BCD4;/*=背景色*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2);
  border-bottom: solid 2px #118e9e;
  border-radius: 4px;
  font-weight: bold;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
  cursor: pointer;
}

#sample2:active {
  /*押したとき*/
  border-bottom: solid 2px #00BCD4;
  box-shadow: none;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.3), 1px 1px rgba(0, 0, 0, 0.3);
}

#sample2 input{
    // デフォルトのinputは出力なし
    display: none;
}

【サンプル3】CSSとJavaScriptを使ってスタイルを変更

次はdiv要素でボタンを作成し、CSSで装飾を付けます。
input要素はサンプル2と同様、出力しないようにします。

<div id="sample3">ファイルを選択</div>
<input type="file" id="sample3_input"/>

#sample3 {
    position: relative;
    display: inline-block;
    padding: 0.75em 1.25em;
    text-decoration: none;
    color: #FFF;
    background: #03A9F4;/*色*/
    border: solid 1px #0f9ada;/*線色*/
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
}

#sample3:active {
    border: solid 1px #03A9F4;
    box-shadow: none;
    text-shadow: none;
}

#sample3 input{
    // デフォルトのinputは出力なし
    display: none;
}

JavaScriptでdiv要素をクリックしたときに、input要素をクリックしたイベントを呼び出します。
今回はJQueryで記述しています。

$(function () {
    $('#sample3').click(function() {
        $('#sample3_input').trigger('click');
    });
});

デモ

今までのサンプルそれぞれのデモです。
ボタンをクリックするとダイアログが表示されますが、ファイルを選択しても何も起こりません。

まとめ

今回はinput要素でファイル選択ボタンのスタイルを変更や、画像の設定を行いました。

ぜひ色々試してみてくださいね！

投稿 ファイルを選択するボタンの画像やスタイルを設定する方法＜input type=”file”＞ は nyanblog ~にゃんぶろぐ~ に最初に表示されました。