반응형
Javascript를 이용한 업로드 이미지를 미리보기 하는 예제를 구현해 보겠습니다.
보통 업로드와 동시에 서버에 저장된 파일의 URL을 매핑하는 구조가 아닌
업로드를 하기전에 이미지를 미리 볼 수 있는 구조여서
보다 심플하게 사용할 수 있습니다.
예제 소스
<html>
<head>
<script type="text/javascript">
var uploadImg = (function loadImageFile() {
if (window.FileReader) {
var ImgPreView;
var ImageReader = new window.FileReader();
var ableType = /^(?:image\/jpeg|image\/png|image\/bmp|image\/gif)$/i;
ImageReader.onload = function(Event) {
if (!ImgPreView) {
var newPreview = document.getElementById("imgPre");
ImgPreView = new Image();
ImgPreView.style.width = "150px";
ImgPreView.style.height = "150px";
newPreview.appendChild(ImgPreView);
}
ImgPreView.src = Event.target.result;
};
return function() {
var img = document.getElementById("img_area").files;
if (!ableType.test(img[0].type)) {
alert("이미지 파일만 가능합니다.");
return;
}
ImageReader.readAsDataURL(img[0]);
}
}
document.getElementById("imgPre").src = document.getElementById("image").value;
})();
</script>
</head>
<body>
<input id="img_area" type="file" onchange="uploadImg();"><br>
미리보기
<div id="imgPre"></div>
</body>
</html>
실행 결과
위와 같이 이미지를 업로드 하면
미리보기를 통해 등록하려는 이미지를 확인할 수 있습니다.
위의 소스 중 ableType이라는 변수는
업로드 이미지의 확장자를 체크할 수 있는데요.
지정된 확장자가 아닌 이미지를 업로드할 경우는
위와 같이 에러 메시지가 나타나게 됩니다.
반응형
'Dev > JavaScript' 카테고리의 다른 글
| [Javascript] 체크박스 전체선택 해제 예제소스 (0) | 2023.01.28 |
|---|---|
| [Javascript] 페이지 새로고침 명령어 구현 소스 (0) | 2023.01.27 |
| [Javascript] iframe post 전송 예제 (0) | 2022.12.26 |
| [Javscript] 문자를 숫자, 숫자를 문자로 변환하기 (0) | 2022.12.09 |
| [Javascript] 회원가입 유효성 검사 (이메일 정규식 체크 포함) (0) | 2022.12.07 |