[Javascript] File Upload 한 뒤 태그에서 이미지 바로 보여주기

1. 여기 보여 줄 img 태그와 file 태그를 html body 에 놓고

<img src="${cart.cartImg}" class="img-rounded" width="50" height="50"  id="cartImg${i}">
<input class="form-control" type="file" id="file" name="file" style="display:none">​

 

2. 이미지를 클릭하면 file 을 클릭하게, file을 클릭하면 이미지 attr 이 변경되게끔 구현했다

var updateCartImgNo = "";
$("img[id^='cartImg']").on("click", function(){
	updateCartImgNo = $(this).closest("table").attr("class");
	$("#file").click();
})

$("#file").on("change", function(){
	imgPreview(this);
})

function imgPreview(input) {
	if (input.files && input.files[0]) {
		var reader = new FileReader();

		reader.onload = function (e) {
			$("."+updateCartImgNo).find("img").attr('src', e.target.result);
			alert(e.target.result);
		}
		reader.readAsDataURL(input.files[0]);
	}
}

 

 

참고 : http://touchsoul.tistory.com/84