Front-end

jQuery를 활용한 이미지 미리보기 및 파일 업로드 구현하기

jki09871 2025. 2. 18. 10:28
웹 애플리케이션에서 파일 업로드 기능은 필수적인 요소 중 하나입니다. 특히, 사용자가 업로드할 이미지를 미리 볼 수 있도록 하면 더욱 직관적인 UX를 제공할 수 있습니다. 이번 글에서는 jQuery와 AJAX를 활용하여 이미지 미리보기와 파일 업로드 기능을 구현하는 방법을 살펴보겠습니다.

1. 프로젝트 개요

이 코드에서는 사용자가 이미지를 선택하면 미리보기를 제공하고, 버튼을 눌러 서버로 업로드할 수 있도록 설계되었습니다.

구현 기능

  • 파일 입력 필드를 통해 이미지 선택
  • 선택한 이미지를 미리보기
  • AJAX를 활용한 서버 업로드 기능

2. HTML 코드

아래는 파일 입력 필드, 전송 버튼, 그리고 이미지를 표시할 영역을 포함한 HTML 코드입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>이미지 업로드</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div>
        <label for="file1">파일</label>
        <input type="file" id="file1" name="file1">
        <button id="btn_submit" onclick="fn_submit()">전송</button>    
    </div>

    <div>
        <div class="img_wrap">
            <img id="img" />
        </div>
    </div>
</body>
</html>

코드 설명

  • <input type="file"> : 파일을 선택할 수 있는 입력 필드
  • <button> : 선택한 파일을 서버로 전송하는 버튼
  • <img> : 미리보기를 표시할 이미지 태그

3. 이미지 미리보기 기능 (jQuery 활용)

선택한 이미지를 화면에 미리 보여주기 위해 FileReader 객체를 사용합니다.

$(document).ready(function() {
    $("#file1").on("change", handleImgFileSelect);
});

function handleImgFileSelect(e) {
    var files = e.target.files;
    var filesArr = Array.prototype.slice.call(files);

    var reg = /(.*?)\/(jpg|jpeg|png|bmp)$/; // 허용할 이미지 확장자

    filesArr.forEach(function(f) {
        if (!f.type.match(reg)) {
            alert("확장자는 이미지 확장자만 가능합니다.");
            return;
        }

        var reader = new FileReader();
        reader.onload = function(e) {
            $("#img").attr("src", e.target.result);// 이미지 미리보기 적용
        }
        reader.readAsDataURL(f);
    });
}

코드 설명

  • change 이벤트가 발생하면 handleImgFileSelect 함수 실행
  • FileReader.readAsDataURL()을 사용해 이미지를 Base64로 변환 후 미리보기
  • 허용되지 않은 확장자(jpg, jpeg, png, bmp 제외) 업로드 시 경고창 표시

4. AJAX를 활용한 파일 업로드 기능

업로드 버튼을 클릭하면 선택한 파일을 AJAX로 서버에 전송합니다.

function fn_submit(){
    var form = new FormData();
    form.append("file1", $("#file1")[0].files[0]);
    
    $.ajax({
        url : "/myapp/result", // 파일을 업로드할 서버 URL
        type : "POST",
        processData : false,
        contentType : false,
        data : form,
        success:function(response) {
            alert("성공하였습니다.");
            console.log(response);
        },
        error: function (jqXHR) {
            alert(jqXHR.responseText);
        }
    });
}

코드 설명

  • FormData 객체를 사용하여 파일 데이터를 서버로 전송
  • processData: false → jQuery가 데이터를 자동 변환하지 않도록 설정
  • contentType: false → multipart/form-data로 전송되도록 설정
  • AJAX 성공 시 알림창과 콘솔 로그 출력

5. 서버에서 파일 처리하기 (Spring Boot 예제)

만약 서버가 Spring Boot로 구현되어 있다면, 다음과 같이 파일을 처리할 수 있습니다.

@PostMapping("/myapp/result")
public ResponseEntity<?> uploadFile(@RequestParam("file1") MultipartFile file) {
    try {
        String fileName = file.getOriginalFilename();
        Path path = Paths.get("uploads/" + fileName);
        Files.write(path, file.getBytes());
        return ResponseEntity.ok("파일 업로드 성공: " + fileName);
    } catch (IOException e) {
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("파일 업로드 실패");
    }
}

코드 설명

  • @RequestParam("file1")을 통해 파일 데이터를 받아 처리
  • 파일을 uploads/ 폴더에 저장 (경로는 변경 가능)
  • 성공 시 200 OK, 실패 시 500 INTERNAL_SERVER_ERROR 응답 반환

6. 마무리

이번 글에서는 이미지 미리보기 및 AJAX 파일 업로드 기능을 구현하는 방법을 살펴봤습니다.

✅ 주요 개념 정리

  • FileReader를 사용하여 이미지를 Base64로 변환 후 미리보기 적용
  • FormData를 활용하여 파일 데이터를 서버에 전송
  • processData: false, contentType: false 설정을 통해 파일 업로드 처리
  • Spring Boot를 활용한 서버 측 파일 저장 구현 예제 제공

이제 jQuery와 AJAX를 활용하여 좀 더 사용자 친화적인 이미지 업로드 기능을 만들 수 있을 것입니다! 🚀

 

전체 코드

더보기
더보기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
 
<div>
    <label for="file1">파일</label> 
    <input type="file" id="file1" name="file1"> 
    <button id="btn_submit" onclick="javascript:fn_submit()">전송</button>    
</div>
 
<div>
       <div class="img_wrap">
           <img id="img" />
       </div>
</div>
 
<script type="text/javascript">
    //이미지 미리보기
    var sel_file;
 
    $(document).ready(function() {
        $("#file1").on("change", handleImgFileSelect);
    });
 
    function handleImgFileSelect(e) {
        var files = e.target.files;
        var filesArr = Array.prototype.slice.call(files);
 
        var reg = /(.*?)\/(jpg|jpeg|png|bmp)$/;
 
        filesArr.forEach(function(f) {
            if (!f.type.match(reg)) {
                alert("확장자는 이미지 확장자만 가능합니다.");
                return;
            }
 
            sel_file = f;
 
            var reader = new FileReader();
            reader.onload = function(e) {
                $("#img").attr("src", e.target.result);
            }
            reader.readAsDataURL(f);
        });
    }
</script>
    
<script>
//파일 업로드
function fn_submit(){
        
        var form = new FormData();
        form.append( "file1", $("#file1")[0].files[0] );
        
         jQuery.ajax({
             url : "/myapp/result"
           , type : "POST"
           , processData : false
           , contentType : false
           , data : form
           , success:function(response) {
               alert("성공하였습니다.");
               console.log(response);
           }
           ,error: function (jqXHR) 
           { 
               alert(jqXHR.responseText); 
           }
       });
}
</script>
</body>
</html>

'Front-end' 카테고리의 다른 글

동적 테이블 생성 및 모달 데이터 선택 기능 구현  (0) 2025.02.20
PDF 다중 업로드 & 미리보기  (0) 2025.02.18
[JQuery로 파일 확장자 추출 및 검증하기]  (0) 2025.02.14

'Front-end'의 다른글

  • 현재글jQuery를 활용한 이미지 미리보기 및 파일 업로드 구현하기

관련글

티스토리툴바