이미지 파일을 선택해서 이미지 미리보기

제목을 어떻게 해야될지 모르겠다. 

그만큼 구글링하는데 힘들었다..

이미지 파일을 선택해서 이미지 미리보기 방법은 아래와 같다.

<script type="text/javascript">

$(function() {

$("#profileImgFile").on('change', function() {

readURL(this);

});

});

function readURL(input) {

if (input.files && input.files[0]) {

var reader = new FileReader();

reader.onload = function(e) {

$('#profile-image1').attr('src', e.target.result);

}

reader.readAsDataURL(input.files[0]);

}

}

</script>

<input type="file" name="profileImgFile" style="display: none;" id="profileImgFile"> 

<input type="text" name="profileImgFileText" id="profileImgFileText" style="display:none;"> 

<img id="profile-image1" alt ="User Pic" src="<c:url value="/image/student.png"/>" border='0'            onclick="document.all.profileImgFile.click(); document.all.profileImgFileText.value=document.all.profileImgFile.value" 

    class="img-circle img-responsive">

http://touchsoul.tistory.com/84

https://bootsnipp.com/snippets/nPvnk