javascript, jquery 이미지 미리보기(preview image)

첨부파일 사이즈도 제한하면서 미리보기 구현! (멀티플 아니고 단일파일에 한해서다.)

 

미리보기 핵심은 굵게 표시한 부분이라고 보면 될것 같다.

파일 첨부 전과 후

var maxSize = 10*1024*1024; //10mb

 

$('input[name^="File"]').on("change", function () {
    var oObj = $(this);
    if (this.files && this.files[0]) {
        var fileSize = this.files[0].size;

        if (fileSize > maxSize) {
            alert(" 10MB 이내 파일을 업로드해주세요.");
            return false;
        }

    var reader = new FileReader();

    reader.onload = function(e){
        oObj.parent().next().next().find('img').attr('src', e.target.result);
    }
reader.readAsDataURL(this.files[0]);

}
});

 

reader.onload로 뭘 가지고 오는지 로그를 찍어보는것도 좋을거같다.