html 5 환경에서 파일 사이즈 및 확장자 체크하기

html 5 가 지원되는 브라우저에서 가능합니다.

ie 10 까지는 되는 것을 확인했고, ie 9 이하는 용량 체크 부분에서 오류 발생합니다.

당연히 크롬에서는 잘 되고요.~

보안 상, 이미지를 프로그램 파일로 변경해서 해킹 우려가 있으니 서버단 코드로 파일 여부를 꼭 체크하시고

서버에 저장하기실 바랍니다.

$("#PhotoImage").change(function () {

                var extension = $(this).val().split('.').pop().toLowerCase();

                if (extension == "") return;

                var validFileExtensions = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];

                if ($.inArray(extension, validFileExtensions) == -1) {

                    $('#spnDocMsg').text("사진은 오직 jpg, jpeg, png, gif, bmp 가능합니다.").show();

                    $(this).replaceWith($(this).val('').clone(true));

                    $('#btnSubmit').prop('disabled', true);

                }

                else {

                    if ($(this).get(0).files[0].size > (32768)) {

                        $('#spnDocMsg').text("사진 용량은 최대 32 kb 입니다.").show();

                        $(this).replaceWith($(this).val('').clone(true));

                        $('#btnSubmit').prop('disabled', true);

                    }

                    else {

                        $('#spnDocMsg').text('').hide();

                        $('#btnSubmit').prop('disabled', false);

                    }

                }

            });