파일 업로드 용량 제한을 뒀는데 서버에 보내면 배열에 자꾸 추가가 됩니다

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
파일 업로드 용량 제한을 뒀는데 서버에 보내면 배열에 자꾸 추가가 됩니다

QA

파일 업로드 용량 제한을 뒀는데 서버에 보내면 배열에 자꾸 추가가 됩니다

답변 1

본문

files change 함수에서 파일 용량을 확인하고 있는데 div로 추가는 안되지만

서버에 보내게 되면 result_photo에 해당 파일이 그대로 포함이 돼서 올라갑니다

용량을 초과하면 return 을 하고 다음 반복문을 실행하면 result_photo 에 포함되지 않아야 하는 거 아닌가요?ㅠ 첫번째 함수에서 제한을 걸어야 할까요..?

조언 부탁드립니다ㅠ

 


$(document).on('click', '#file_add', function() {
            if (img_count < upload_count) {
                $('.file_tmp_box').append("<input type='file' name='result_photo[]' id='file_tmp_" + tmp_img_count + "' class='files' accept='image/*' multiple>");
                $('#file_tmp_' + tmp_img_count).trigger('click');
                tmp_img_count++;
            } else {
                alert('사진은 최대 ' + upload_count + '장까지 업로드 가능합니다.');
            }
        });
 
        $(document).on('change', '.files', function(event) {
            if ('<?=$w?>' == 'u' && $('#img_order').val() == '[]') {
                var idx = chk_count;
            } else {
                var idx = Math.max(...imgOrder, -1);
       
                $('.img_box').each(function() {
                    var currentIdx = $(this).data('idx');
                    if (currentIdx > idx) {
                        idx = currentIdx;
                    }
                });
                idx++;
            }
 
            $.each(this.files, function(i) {
                if (img_count < upload_count) {
                    if (this.size > <?=$upload_size?>) {
                        alert('<?=$upload_size/1048576?>MB 이상인 사진은 업로드 할 수 없습니다.');
                        return;
                    }
 
                    readURL(this,idx);
                   
                    img_count++;
                    idx++;
                } else {
                    alert('사진은 최대 '+upload_count+'장까지 업로드 가능합니다.');
                    return false;
                }
            });
        });
 
        function readURL(f, idx) {
            var f_type = f.type;
            var f_type_1 = f_type.split("/");
 
            var img_arr = ['gif', 'jpg', 'jpeg', 'png'];
            if ($.inArray(f_type_1[1], img_arr) == -1) {
                return;
            }
 
            var file_name = f.name;
            var reader = new FileReader();
            reader.onload = function(e) {
                var append_txt = "";
                append_txt += "<div class='img_box col-sm-4 img_box_inner' data-idx='" + idx + "'>";
                append_txt += "<a type='button' class='img_del_btn' data-value='" + file_name + "' data-type='add' data-file='" + (tmp_img_count-1) + "' data-idx='" + idx + "' style='z-index: 2;'><img src='<?=G5_IMG_URL?>/photo_close.png' alt='삭제'></a>";
                append_txt += "<img src='" + e.target.result + "' data-text='" + file_name + "' class='property-img-files'/>";
                append_txt += "</div>";
                $('.image-list').append(append_txt);
                updateCount();
                updateImageOrder();
            }
            reader.readAsDataURL(f);
        }

이 질문에 댓글 쓰기 :

답변 1

현재 files change 이벤트에서 용량 초과를 체크하는 부분이 있지만,

배열(result_photo[])에 용량 초과 파일이 여전히 포함되는 문제가 있습니다.

이를 방지하기 위해 로직 수정이 필요합니다.

- $(document).on('change', '.files', function(event) 함수 내부에서

  용량 초과 파일을 배열에 포함시키지 않도록 명시적으로 필터링.

 

files change 이벤트에서 용량 초과 검사를 수행하고 있으나,

사용자 경험과 코드 유지보수를 고려하면

업로드 제한 및 검사를 첫 번째 함수에서 처리하는 것이 더 적합합니다.

- 파일 추가 버튼 클릭 시 용량 초과 및 업로드 가능 개수를 미리 확인하여

  파일 선택 전에 제한을 걸도록 변경.

 

클라이언트 측에서만 제한을 설정하면 악의적인 사용자가 제한을 우회할 수 있으므로,

서버 측에서도 업로드 용량 및 파일 개수를 제한해야 합니다.

- 그누보드의 디렉토리 구조 상,

  bbs/write_update.php 또는 업로드 관련 PHP 파일에서 서버 제한을 추가.

파일 선택 전에 용량 검사를 수행하는 방법은 기술적으로 불가능합니다.
이는 브라우저가 사용자의 로컬 파일 시스템에 직접 접근할 수 없기 때문입니다.
JavaScript는 사용자가 파일을 선택한 이후에만 파일 크기 등의 정보를 얻을 수 있습니다.

※파일 선택 전에 용량 초과를 검사할 수는 없으나, 다음과 같은 방법을 고려할 수는 있습니다.
- 파일 선택 전에 사용자가 업로드 제한(최대 파일 크기, 개수)을 명확히 이해하도록 메시지를 표시
- 파일 입력 필드에서 multiple 속성을 제거하여 한 번에 하나의 파일만 선택하도록 제한합니다.
  이는 사용자가 파일 선택 과정을 반복하면서 업로드 제한을 준수하도록 유도할 수 있음.
- 파일 선택 후 change 이벤트를 통해 용량 초과를 바로 검사하여
  유효하지 않은 파일을 사용자 입력 배열에 포함시키지 않음.
- 파일 선택 전에 제어가 어렵기 때문에, 서버 측에서도 파일 크기와 개수를 반드시 확인해야 함,.
  - - 악의적인 요청을 방지하기 위해 반드시 서버에서 확인해야 함.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 0
© SIRSOFT
현재 페이지 제일 처음으로