이미지 첨부파일 : 첨부파일 이미지 미리보기

첨부된파일이미지를 img태그안에 바로 보여줌

모두다 jsp에다가 써주면 됨.

<c:if test="${student.student_pic.file_name.length() >0}">
	<input type="file" name="studentImage" value="${student.student_pic.file_original_name}" id="input-image" accept="image/*">			  
	<img id="preview-image" src="<%=request.getContextPath()%>/img${student.student_pic.file_name}" class="img-thumbnail" alt="${student.student_name}" style="box-sizing:border-box; width:200px; height:207px;">
</c:if>

c:if처리가 된건 기존에 등록된 이미지가 없으면 띄워줄 기본이미지를 따로 밑에 지정해놨기때문

 

<script type="text/javascript"> //첨부파일이미지 미리보기
	function readImage(input){
		if(input.files && input.files[0]){
			//FileReader 인스턴스 생성
			const reader = new FileReader()	

			//이미지파일만 넣을 수 있도록하기

			//이미지가 로드 된 경우
			reader.onload = e => {
				const previewImage = document.getElementById("preview-image")
				previewImage.src = e.target.result
			}
			// reader가 이미지 읽도록 하기
			reader.readAsDataURL(input.files[0])
		}
	}
    // input file에 change 이벤트 부여
    const inputImage = document.getElementById("input-image")
    inputImage.addEventListener("change", e => {
    	readImage(e.target)
    })
</script>

 

해당코드를 어떤 대상의 정보 수정, 등록에 적용가능함/ img태그는 상세보기탭에서 사용가능