728x90
반응형
서론
html 코드를 사용하여 파일을 첨부할때 보통 input type = "file"를 사용하여 파일을 첨부합니다.
이때 파일만 첨부되고 어떤 파일이 첨부 되었는지 알수가 없습니다.
이미지 미리보기가 된다면 어떤파일을 첨부 했는지 쉽게 알 수 있겠죠.
이번 글은 첨부한 이미지파일을 미리볼 수 있는 미리보기 기능에 대해 작성해보겠습니다.
본문
작업할 내용
아래 파일 선택을 눌러서 파일을 첨부하면 위쪽에 미리보기로 첨부한 이미지가 올라가게 됩니다.
오른쪽의 첨부하기 버튼을 누르면 파일을 저장하게 됩니다.
이미지 미리보기 코드
728x90
이미지 파일이 아닌 다른 확장자의 파일을 넣으면 경고창을 띄우게 됩니다.
파일을 첨부했을때 $("#form_file").on("change", function(e) 를 통해서 파일이 들어왔음을 감지하고,
$("#preview").attr("src", e.target.result); 를 통해서 preview라는 이미지태그의 src값에 첨부한 파일값을 넣어서 이미지 태그에 첨부한 파일을 띄워서 보여주게됩니다.
파일 확장자 판별
코드중 isImageFile()라는 함수를 통해 파일 확장자를 판단하여 이미지 파일이 아니라면 경고창을 띄우게됩니다.
function isImageFile(file) {
// 파일명에서 확장자를 가져옴
var ext = file.name.split(".").pop().toLowerCase();
return ($.inArray(ext, ["jpg", "jpeg", "gif", "png"]) === -1) ? false : true;
}
전체코드
css를 제외한 전체코드를 통해 코드 내용을 확인해 보고, 직접 적용해보며 응용해보시길 바랍니다.
<div class="subtit001">
<div class="text003">이미지 첨부</div>
<img id="preview" style="max-width: 300px;">
<input type="file" name="file" id="form_file" value="" />
</div>
<div class="btn_001">
<span class="btn_submit" onclick="form_chk();">첨부하기</span>
</div>
$(document).ready(function() {
$("#form_file").on("change", function(e) {
var file = e.target.files[0];
if(isImageFile(file)) {
var reader = new FileReader();
reader.onload = function(e) {
$("#preview").attr("src", e.target.result);
}
reader.readAsDataURL(file);
} else {
alert("이미지 파일만 첨부 가능합니다.");
$("#form_file").val("");
$("#preview").attr("src", "");
}
});
});
// 업로드 파일 이미지 파일인지 확인
function isImageFile(file) {
// 파일명에서 확장자를 가져옴
var ext = file.name.split(".").pop().toLowerCase();
return ($.inArray(ext, ["jpg", "jpeg", "gif", "png"]) === -1) ? false : true;
}
function form_chk() {
var file_val = $("#form_file").val();
if(file_val) {
//db에 파일 첨부 처리
alert("이미지가 첨부되었습니다");
} else {
alert("첨부된 이미지가 없습니다.");
}
}
728x90
반응형
'코딩 > jQuery' 카테고리의 다른 글
[jQuery] 제이쿼리 슬라이딩 애니메이션 예제: 부드러운 슬라이딩 효과로 콘텐츠를 전환하는 방법 (49) | 2023.03.09 |
---|---|
[자바스크립트/jQuery] 제이쿼리, 정규식을 활용한 이메일과 비밀번호 유효성 검사 (57) | 2023.03.03 |
[자바스크립트/Jquery] confirm 확인과 취소, div 값 변경 (23) | 2023.02.13 |
[자바스크립트/jQuery] 간단한 예제로 ajax 사용해보기 (28) | 2022.12.30 |
[자바스크립트/jQuery] 버튼 클릭 시 박스 숨기기, 보이기 (show, hide) (19) | 2022.12.27 |
댓글