이미지 파일 업로드할 때 미리보기 부분

html 부분

<div class="home-photo-wrapper">

<div class="home-photo">

<label for="home-img-edit1"><img src="../images/add_icon.png" /></label> 

<input type="file" onchange="previewFile(1)" accept=".bmp, .jpg, .png" id="home-img-edit1" name="home-photo1"> 

<input type="hidden" value="${profile.houseImg1}" name="originhome1" />

</div>

<c:if test="${not empty profile.houseImg1}">

<script>

$('#home-img-edit1').parent().css({'background' : 'url(../upload/profilePic/${profile.houseImg1}) no-repeat', 'background-size' : 'contain'});

</script>

</c:if>

script 부분

<script>

function previewFile(num) {

var homeImgEdit = '#home-img-edit'+num;

var file = document.querySelector(homeImgEdit).files[0];

var reader = new FileReader();

reader.addEventListener("load", function() {

/* $("#home-img-edit" + num).parent().css(

{

"background" : "url("+ reader.result+ ") no-repeat center",

"background-size" : "contain"

}); */

var container = document.querySelector(homeImgEdit).parentNode;

container.style.background = "url("+reader.result+") no-repeat center";

container.style["background-size"] = "contain";

}, false);

if (file) {

reader.readAsDataURL(file);

}

}

</script>

참고 사이트

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

위와 같이 input 태그마다 이벤트를 거는 것은 좋은 코드가 아니다.....

부모 노드에 이벤트를 걸어 이벤트를 처리할 수 있도록 한다.

html 부분

<div class="home-photo-container">

<h3>집 사진</h3>

<div class="home-photo-wrapper">

<div class="home-photo">

<label for="home-img-edit1"><img src="../images/add_icon.png" /></label>

<input type="file" accept=".bmp, .jpg, .png" id="home-img-edit1" name="home-photo1">

<input type="hidden" value="${profile.houseImg1}" name="originhome1" />

</div>

<c:if test="${not empty profile.houseImg1}">

<script>

$('#home-img-edit1').parent().css({'background' : 'url(../upload/profilePic/${profile.houseImg1}) no-repeat', 'background-size' : 'contain'});

</script>

</c:if>

<div class="home-photo">

<label for="home-img-edit2"><img src="../images/add_icon.png" /></label> 

<input type="file" accept=".bmp, .jpg, .png" id="home-img-edit2" name="home-photo2">

<input type="hidden" value="${profile.houseImg2}" name="originhome2" />

</div>

<c:if test="${not empty profile.houseImg2}">

<script>

$('#home-img-edit2').parent().css({'background' : 'url(../upload/profilePic/${profile.houseImg2}) no-repeat', 'background-size' : 'contain'});

</script>

</c:if>

<div class="home-photo">

<label for="home-img-edit3"><img src="../images/add_icon.png" /></label>

<input type="file" accept=".bmp, .jpg, .png" id="home-img-edit3" name="home-photo3"> 

<input type="hidden" value="${profile.houseImg3}" name="originhome3" />

</div>

<c:if test="${not empty profile.houseImg3}">

<script>

$('#home-img-edit3').parent().css({'background' : 'url(../upload/profilePic/${profile.houseImg3}) no-repeat center', 'background-size' : "contain"});

 </script>

</c:if>

</div>

</div>

script

<script>

var homePhoto = document.querySelector(".home-photo-wrapper");

homePhoto.onchange = function(e) {

var file = e.target.files[0];

var reader = new FileReader();

reader.addEventListener("load", function() {

var container = e.target.parentNode;

container.style.background = "url("+reader.result+") no-repeat center";container.style["background-size"] = "contain";

}, false);

if (file) {

reader.readAsDataURL(file);

}

}

</script>

* e.target = input 태그