#author("2021-11-25T09:08:57+09:00","","")
#author("2021-11-25T11:40:28+09:00","","")
**画像ファイルのプレビュー表示のコード [#c3141316]
この機能はJQueryを使って実現させます
&br;JQueryの全体のコード
 $(function() {
     $('#myfile').change(function(e){
    //ファイルオブジェクトを取得する
    var file = e.target.files[0];
    var reader = new FileReader();
    //画像でない場合は処理終了
    if(file.type.indexOf("image") < 0){
      alert("画像ファイルを指定してください。");
      return false;
    }
    //アップロードした画像を設定する
    reader.onload = (function(file){
      return function(e){
    reader.onload = (function(e){
        $("#img1").attr("src", e.target.result);
        $("#img1").attr("title", file.name);
      };
    })(file);
    })
    reader.readAsDataURL(file);
  });
 });


  HTMLのコード
  <head>
  <meta charset="UTF-8">
  <title>マイページ</title>
  <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
  </head>
  <body>
  
  <div class = "div">
    <label class = "picture">画像</label>
    <input id = "myfile" class = "file" type = "file" name = "file" th:field = "*{uploadFile}"><br>	
    <img id="img1"  style="width:150px;height:150px;"/>
   </div>

*上記のJQueryのコードを１行づつ解説 [#e02985d7]
headタグの中に<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>を記述しないとJQueryのコードが動かないので必ず記述してください。
&br;画像はHTMLコードのimgタグに縦横幅150pxの四角が出るようになっているのでその四角の中に画像が表示されるようにしている

*上記のJQueryのコードの主要部分を解説 [#e02985d7]
**$(function() {} [#c111c79c]
$(function(){}は「HTML要素を読み込んでからJQueryを実行する」という意味です。
この記述を忘れるとプログラムがうまく動作しなくなってしまうこともあるので注意しましょう！

**$('#myfile').change(function(e) [#v00c6a03]
('#myfile')はHTMLで記述されているinputタグの中に記述されているid属性の指定。
シャープ記号に続けてid属性の値を記述することで、id属性に「該当するid」が設定されている要素を選択します。
&br;
&br; .change(function(e)はinputなどの要素の中身が変更された際にイベント処理を実行することができます。この場合だとinputでファイルを選択した時に画像が表示されることを言います。
&br;
&br;functionの中のeはeventの略でイベントオブジェクトのことを言います。
&br; イベントオブジェクトとは、発生したイベントに関する様々な情報を提供するオブジェクトのこと。イベントオブジェクトにセットにセットされている主なプロパティ一覧としてtypeやtargetなどがあります

** var file = e.target.files[0]; [#mfb2ebe3]
varは変数を定義するときに必要で、fileは変数名です。
&br;e.target.files[0]はHTML上でファイルを選択した時に選択されたファイルを取得するために必要

**var reader = new FileReader(); [#fbe422cb]
FileReader()はBlob(File)オブジェクトからデータを読み込むことのみを目的としたオブジェクトです。

**file.type.indexOf("image") < 0 [#t50d0200]
file.type.indexOf("image")はファイルを選択するときにjpegイメージなどの画像イメージ以外を選ぶと表示されないようにするコードです。

**reader.onload = (function(e) [#bfc2c7f6]
readerの後ろについているonloadはFileReaderのイベントの１つです。onloadはデータの読み込みが正常に完了した時にloadイベントが発生し、ここに設定したコールバック関数function(e)が呼び出されます。

** $("#img1").attr("src", e.target.result); [#ra736ba8]
("#img1")はimgタグの中に記述されているid属性の指定。
&br;atterメソッドは、HTML要素の様々な属性の値を取得や変更ができるメソッドです。
今回の場合だと、imgタグにsrc属性を追加し、e.target.resultでファイルのURLを取得できるので取得したURLを追加したsrc属性に指定し設定する。

** reader.readAsDataURL(file); [#of6634de]
readDataURLはFileReaderのメソッドです。readAsDataURLは画像ファイルをこのメソッドで読み込んで、読み込んだデータをimg要素のsrc属性に指定するとブラウザに画像が表示される。
&br;今回の場合だとFileReaderインスタンスを作成し、readAsDataURLメソッドに、var file = e.target.files[0];で取得したファイルを渡すことで画像が表示されるようになっている。
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS