이전에 자바스크립트와 Multipart를 이용하여 파일 업로드를 구현하는 예제를 한적이 있습니다. 이를 구현하여 파일 업로드를 할때 가장 많이 이용하는 것이 바로 이미지 파일입니다.
이 업로드 기능에 덧붙여 자바스크립트 미리보기 기능을 추가 구현하면 사용자 관점에서 더 편리한데요. 그래서 이번 시간에는 업로드 할 이미지를 미리볼 수 있는 기능을 구현해 하겠습니다.
예제소스
<script type="text/javascript"> var InputImage = (function loadImageFile() { if (window.FileReader) { var ImagePre; var ImgReader = new window.FileReader(); var fileType = /^(?:image\/bmp|image\/gif|image\/jpeg|image\/png|image\/x\-xwindowdump|image\/x\-portable\-bitmap)$/i; ImgReader.onload = function (Event) { if (!ImagePre) { var newPreview = document.getElementById("imagePreview"); ImagePre = new Image(); ImagePre.style.width = "200px"; ImagePre.style.height = "140px"; newPreview.appendChild(ImagePre); } ImagePre.src = Event.target.result; }; return function () { var img = document.getElementById("image").files; if (!fileType.test(img[0].type)) { alert("이미지 파일을 업로드 하세요"); return; } ImgReader.readAsDataURL(img[0]); } } document.getElementById("imagePreview").src = document.getElementById("image").value; })(); </script> </head> <body> <div id="imagePreview"></div><br> <input id="image" type="file" onchange="InputImage();"> </body>
구동 결과
다음의 예제코드를 JSP파일에 복사하여 실행하시면 다음과 같이 작동하는 것을 확인할 수 있습니다.
예외사항으로 익스플로러나 크롬의 버전에 따라 실행되지 않을 수도 있습니다.
위와같이 파일을 업로드할 때 해당 되는 이미지 선택시 미리보기 기능이 활성화 되었는데요. 이 기능은자바스크립트를 통해서도 구현이 가능하지만 jQuery로도 구현이 가능하니 한번 찾아보시기 바랍니다.
이재선
좋은정보 감사 합니다.
미리보기 이미지 표시될 위치는 어떻게 설정 하나요? 지정한 위치에 표시되게끔 하고 싶은데요
(예: tabal 안등)
감사합니다
관리자
위의 소스상 이미지는 id=”imagePreview” 에 표시되므로 표시되고 싶은 html id를 위와 같이 지정해 주시면 될거 같습니다.
아니면 스크립트 상의 document.getElementById(“imagePreview”).src 이걸 변경 시켜도 될거 같습니다.
doctorson
정상적으로 잘 동작하네요 감사합니다.
관리자
잘 동작한다니 다행입니다. ^^
이동훈
혹시 회원가입 사진 미리보기라고 생각하고
사진을 등록하고 DB로 저장한다고 하면 이 사진을 서버에 어떻게 저장하고 그 URL을 어떻게 DB에 저장할수있을까요??
관리자
사진 업로드 기능에 어디에 쓸것인지 경로를 지정하는 부분이 있고 파일을 write 하고 파일 이름을 리턴받을수 있습니다. 이 두가지를 조합하여 디비에 저장하시면 됩니다