この機能は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>