파일 업로드 용량 제한을 뒀는데 서버에 보내면 배열에 자꾸 추가가 됩니다
본문
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 파일에서 서버 제한을 추가.
답변을 작성하시기 전에 로그인 해주세요.