파일 업로드 용량 제한을 뒀는데 서버에 보내면 배열에 자꾸 추가가 됩니다 채택완료
files change 함수에서 파일 용량을 확인하고 있는데 div로 추가는 안되지만
서버에 보내게 되면 result_photo에 해당 파일이 그대로 포함이 돼서 올라갑니다
용량을 초과하면 return 을 하고 다음 반복문을 실행하면 result_photo 에 포함되지 않아야 하는 거 아닌가요?ㅠ 첫번째 함수에서 제한을 걸어야 할까요..?
조언 부탁드립니다ㅠ
</p>
<p>$(document).on('click', '#file_add', function() {</p>
<p> if (img_count < upload_count) {</p>
<p> $('.file_tmp_box').append("<input type='file' name='result_photo[]' id='file_tmp_" + tmp_img_count + "' class='files' accept='image/*' multiple>");</p>
<p> $('#file_tmp_' + tmp_img_count).trigger('click');</p>
<p> tmp_img_count++;</p>
<p> } else {</p>
<p> alert('사진은 최대 ' + upload_count + '장까지 업로드 가능합니다.');</p>
<p> }</p>
<p> });</p>
<p> </p>
<p> $(document).on('change', '.files', function(event) {</p>
<p> if ('<?=$w?>' == 'u' && $('#img_order').val() == '[]') {</p>
<p> var idx = chk_count;</p>
<p> } else {</p>
<p> var idx = Math.max(...imgOrder, -1);</p>
<p> </p>
<p> $('.img_box').each(function() {</p>
<p> var currentIdx = $(this).data('idx');</p>
<p> if (currentIdx > idx) {</p>
<p> idx = currentIdx;</p>
<p> }</p>
<p> });</p>
<p> idx++;</p>
<p> }</p>
<p> </p>
<p> $.each(this.files, function(i) {</p>
<p> if (img_count < upload_count) {</p>
<p> if (this.size > <?=$upload_size?>) {</p>
<p> alert('<?=$upload_size/1048576?>MB 이상인 사진은 업로드 할 수 없습니다.');</p>
<p> return;</p>
<p> }</p>
<p> </p>
<p> readURL(this,idx);</p>
<p> </p>
<p> img_count++;</p>
<p> idx++;</p>
<p> } else {</p>
<p> alert('사진은 최대 '+upload_count+'장까지 업로드 가능합니다.');</p>
<p> return false;</p>
<p> }</p>
<p> });</p>
<p> });</p>
<p> </p>
<p> function readURL(f, idx) {</p>
<p> var f_type = f.type;</p>
<p> var f_type_1 = f_type.split("/");</p>
<p> </p>
<p> var img_arr = ['gif', 'jpg', 'jpeg', 'png'];</p>
<p> if ($.inArray(f_type_1[1], img_arr) == -1) {</p>
<p> return;</p>
<p> }</p>
<p> </p>
<p> var file_name = f.name;</p>
<p> var reader = new FileReader();</p>
<p> reader.onload = function(e) {</p>
<p> var append_txt = "";</p>
<p> append_txt += "<div class='img_box col-sm-4 img_box_inner' data-idx='" + idx + "'>";</p>
<p> 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>";</p>
<p> append_txt += "<img src='" + e.target.result + "' data-text='" + file_name + "' class='property-img-files'/>";</p>
<p> append_txt += "</div>";</p>
<p> $('.image-list').append(append_txt);</p>
<p> updateCount();</p>
<p> updateImageOrder();</p>
<p> }</p>
<p> reader.readAsDataURL(f);</p>
<p> }</p>
<p>답변 1개
현재 files change 이벤트에서 용량 초과를 체크하는 부분이 있지만,
배열(result_photo[])에 용량 초과 파일이 여전히 포함되는 문제가 있습니다.
이를 방지하기 위해 로직 수정이 필요합니다.
- $(document).on('change', '.files', function(event) 함수 내부에서
용량 초과 파일을 배열에 포함시키지 않도록 명시적으로 필터링.
files change 이벤트에서 용량 초과 검사를 수행하고 있으나,
사용자 경험과 코드 유지보수를 고려하면
업로드 제한 및 검사를 첫 번째 함수에서 처리하는 것이 더 적합합니다.
- 파일 추가 버튼 클릭 시 용량 초과 및 업로드 가능 개수를 미리 확인하여
파일 선택 전에 제한을 걸도록 변경.
클라이언트 측에서만 제한을 설정하면 악의적인 사용자가 제한을 우회할 수 있으므로,
서버 측에서도 업로드 용량 및 파일 개수를 제한해야 합니다.
- 그누보드의 디렉토리 구조 상,
bbs/write_update.php 또는 업로드 관련 PHP 파일에서 서버 제한을 추가.
답변에 대한 댓글 4개
이는 브라우저가 사용자의 로컬 파일 시스템에 직접 접근할 수 없기 때문입니다.
JavaScript는 사용자가 파일을 선택한 이후에만 파일 크기 등의 정보를 얻을 수 있습니다.
※파일 선택 전에 용량 초과를 검사할 수는 없으나, 다음과 같은 방법을 고려할 수는 있습니다.
- 파일 선택 전에 사용자가 업로드 제한(최대 파일 크기, 개수)을 명확히 이해하도록 메시지를 표시
- 파일 입력 필드에서 multiple 속성을 제거하여 한 번에 하나의 파일만 선택하도록 제한합니다.
이는 사용자가 파일 선택 과정을 반복하면서 업로드 제한을 준수하도록 유도할 수 있음.
- 파일 선택 후 change 이벤트를 통해 용량 초과를 바로 검사하여
유효하지 않은 파일을 사용자 입력 배열에 포함시키지 않음.
- 파일 선택 전에 제어가 어렵기 때문에, 서버 측에서도 파일 크기와 개수를 반드시 확인해야 함,.
- - 악의적인 요청을 방지하기 위해 반드시 서버에서 확인해야 함.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인