画像ファイルのプレビューの表示

この機能はJQueryを使って実現させます
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){
       $("#img1").attr("src", e.target.result);
       $("#img1").attr("title", file.name);
     };
   })(file);
   reader.readAsDataURL(file);
 });
});
 HTMLのコード
 <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>

トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS