[jquery] 이미지 파일 미리보기 (file, image)

 

 

웹에서 input type='file' 인 입력 항목에 이미지 파일을 선택했을 때 이미지 파일이 바로 화면에 보이게 하는  미리보기 기능을 사용할 때가 있다.

구현 방법은 간단하다.

file 태그에 변경이 이루어지면 image 파일인경우 미리보기를 하려는 img 태그에 파일 정보를 넣어주면 된다.

이미지를 미리 보여주기 전에 파일의 확장자를 체크하거나 파일의 용량을 확인하는 사전 작업이 수행되면 더 좋은 코드가 될 것 같다.

구현 코드 

# html 화면 

<img id="preview">
<input type="file" id="imageFile">

$("#imageFile").on("change", function(event) {

    var file = event.target.files[0];

    var reader = new FileReader(); 
    reader.onload = function(e) {

        $("#preview").attr("src", e.target.result);
    }

    reader.readAsDataURL(file);
});

// 확장자가 이미지 파일인지 확인
function isImageFile(file) {

    var ext = file.name.split(".").pop().toLowerCase(); // 파일명에서 확장자를 가져온다. 

    return ($.inArray(ext, ["jpg", "jpeg", "gif", "png"]) === -1) ? false : true;
}

// 파일의 최대 사이즈 확인
function isOverSize(file) {

    var maxSize = 3 * 1024 * 1024; // 3MB로 제한 

    return (file.size > maxSize) ? true : false;
}