파일 업로드 용량 제한을 뒀는데 서버에 보내면 배열에 자꾸 추가가 됩니다 채택완료
files change 함수에서 파일 용량을 확인하고 있는데 div로 추가는 안되지만
서버에 보내게 되면 result_photo에 해당 파일이 그대로 포함이 돼서 올라갑니다
용량을 초과하면 return 을 하고 다음 반복문을 실행하면 result_photo 에 포함되지 않아야 하는 거 아닌가요?ㅠ 첫번째 함수에서 제한을 걸어야 할까요..?
조언 부탁드립니다ㅠ
$(document).on('click', '#file_add', function() {
if (img_count upload_count) {
$('.file_tmp_box').append("");
$('#file_tmp_' + tmp_img_count).trigger('click');
tmp_img_count++;
} else {
alert('사진은 최대 ' + upload_count + '장까지 업로드 가능합니다.');
}
});
$(document).on('change', '.files', function(event) {
if ('' == '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 > ) {
alert('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 += "";
append_txt += "답변 1개
glitter0gim현재 files change 이벤트에서 용량 초과를 체크하는 부분이 있지만,
배열(result_photo[])에 용량 초과 파일이 여전히 포함되는 문제가 있습니다.
이를 방지하기 위해 로직 수정이 필요합니다.
- $(document).on('change', '.files', function(event) 함수 내부에서
용량 초과 파일을 배열에 포함시키지 않도록 명시적으로 필터링.
files change 이벤트에서 용량 초과 검사를 수행하고 있으나,
사용자 경험과 코드 유지보수를 고려하면
업로드 제한 및 검사를 첫 번째 함수에서 처리하는 것이 더 적합합니다.
- 파일 추가 버튼 클릭 시 용량 초과 및 업로드 가능 개수를 미리 확인하여
파일 선택 전에 제한을 걸도록 변경.
클라이언트 측에서만 제한을 설정하면 악의적인 사용자가 제한을 우회할 수 있으므로,
서버 측에서도 업로드 용량 및 파일 개수를 제한해야 합니다.
- 그누보드의 디렉토리 구조 상,
bbs/write_update.php 또는 업로드 관련 PHP 파일에서 서버 제한을 추가.
답변에 대한 댓글 4개
glitter0gim이는 브라우저가 사용자의 로컬 파일 시스템에 직접 접근할 수 없기 때문입니다.
JavaScript는 사용자가 파일을 선택한 이후에만 파일 크기 등의 정보를 얻을 수 있습니다.
※파일 선택 전에 용량 초과를 검사할 수는 없으나, 다음과 같은 방법을 고려할 수는 있습니다.
- 파일 선택 전에 사용자가 업로드 제한(최대 파일 크기, 개수)을 명확히 이해하도록 메시지를 표시
- 파일 입력 필드에서 multiple 속성을 제거하여 한 번에 하나의 파일만 선택하도록 제한합니다.
이는 사용자가 파일 선택 과정을 반복하면서 업로드 제한을 준수하도록 유도할 수 있음.
- 파일 선택 후 change 이벤트를 통해 용량 초과를 바로 검사하여
유효하지 않은 파일을 사용자 입력 배열에 포함시키지 않음.
- 파일 선택 전에 제어가 어렵기 때문에, 서버 측에서도 파일 크기와 개수를 반드시 확인해야 함,.
- - 악의적인 요청을 방지하기 위해 반드시 서버에서 확인해야 함.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인