게시판 토이 프로젝트를 하고 있는데, 첨부한 이미지들을 미리 보여주고 싶었다.
여러 글들을 참고해서 어떻게 해결하였는지 적어보고자 한다.
다른 글들의 방법을 내 프로젝트에 맞게 조금 변형해서 적용하였다. JavaScript를 잘 모르기때문에 더 좋은 방법이 있을 수 있으며, 참고만 하셨으면 좋겠다.
JavaScript
<script type="text/javascript" th:fragment="imageJSScript">
function readURLs(e){
var files = e.files;
var fileArr = Array.prototype.slice.call(files)
document.getElementById("previews").innerHTML = "";
for (f of fileArr) {
imageLoader(f);
}
}
function imageLoader(input) {
var img_style = 'width:300px;height:300px;';
if (input) {
var reader = new FileReader();
var previews = document.getElementById("previews");
reader.onload = function(e) {
let img = document.createElement('img')
img.setAttribute('style', img_style)
img.src = e.target.result;
previews.appendChild(img);
};
reader.readAsDataURL(input);
}
}
</script>- readURLs
- 여러 MultipartFile들을 받기 때문에, for문으로 각 파일 분리해서
imageLoader호출한다. document.getElementById("previews").innerHTML = "";을 통해, 이미지 추가 시 기존의 사진 제거해준다.imageLoader에서는 img 태그를 삽입만 하기 때문에, 이렇게 해주지 않으면 이미지 추가할 때마다 계속 쌓여서 보인다.
- imageLoader
- id가
previews인 element를 미리 저장해두고, img tag를 만들어서previews내부에 추가해준다. img.src를 잘 설정해주고,reader.readAsDataURL(input);을 해주어야 첨부한 이미지를 볼 수 있다.
HTML
<head th:replace="fragments/imageJSScript :: imageJSScript">
...
<div>
<div>
<label for="itemImages" th:text="'물건 사진'">물건 사진</label>
<input type="file" id="itemImages" multiple="multiple" th:field="*{itemImages}" class="form-control" onchange="readURLs(this);">
</div>
<div id="previews">
</div>
</div>- 원하는 위치에
<div id="previews">와 같이 미리 이미지들을 담을 곳을 만들어주었다. - input tag에
multiple="multiple"을 적어야 이미지를 추가할 때, 여러 개를 추가할 수 있다. onchange="readURLs(this);"을 통해 이미지를 추가할 때,readURLs함수가 실행된다.<head th:replace="fragments/imageJSScript :: imageJSScript">는 JavaScript 코드를 fragment로 저장해두고, 이미지 미리보기가 필요할 때만, 해당 코드를 추가해서 재사용성을 높였다.
참고한 글들
JavaScript을 사용한 multiple 속성 이미지 미리보기
[Javascript] JS로 HTML 요소 생성 및 추가하기
javaScript 에서 id 추가, 삭제 , 수정 하기
꾸준히 성실하게