JS에서 파일크기 제한하기

Backend에서 확인하는 것은 당연한 거고 Frontend에서도 네트워크를 타고 넘어가기 전에 사전에 확인하는 작업도 중요한 부분이라고 할 수 있습니다. 왜냐하면 큰 파일을 첨부하면 일단 전송이 발생하기 때문에 네트워크 부하가 발생을 합니다. 해서 사전에 차단할 수 있으면 차단하는 게 합리적입니다.

console.log(id_attach.files[0])

현재 파일을 확인해 보면 size라는 값이 존재하는데 이걸 가지고 판단을 하면 됩니다.

    for (const file of id_attach.files) {
      if (file.size > 40 * 1024 * 1024) {
        alert("파일 크기가 40MB보다 큰 파일이 첨부되었습니다.")
        id_attach.value = ""
        return false
      }
      f.append("files[]", file)
    }

JS 부분에서 파일 사이즈를 체크해서 해당 값보다 큰 값이 들어오면 멈추어주면 좋을 거 같습니다.

PHP에서 exe, txt 등등 파일 제한하기

      $not_allowed_file = ["exe", "txt", "xls"];
      if (in_array($ext, $not_allowed_file)) {
        $arr = ["result" => "not_allowed_file"];
        die(json_encode($arr));
      }

다중 파일 첨부 부분에 확장자를 구하는 곳 아래에다가 위와 같이 하면 exe, txt, xls 등등 파일은 더 이상 첨부할 수 없게 됩니다. in_array 함수는 첫 번째 값을 가지고 뒤에 오는 배열에 값이 존재하는지를 판단하고 있으면 True 아니면 False를 반환합니다.

else if (data.result == "not_allowed_file") {
          alert("exe파일은 업로드 할 수 없습니다.")
          id_attach.value = ""
          return false
        }

JS에서도 마찬가지로 넘겨온 값을 가지고 위와 같이 판단을 해주면 됩니다.

JS에서 확장자 제한하기

// 글쓰기 - 파일 확장자 구하기
function getExtensionOfFilename(filename) {
  let filelen = filename.length
  let lastdot = filename.lastIndexOf(".")
  return ext = filename.substring(lastdot + 1, filelen).toLowerCase()
}

먼저 함수를 하나 만들어줬습니다. 해당 함수는 파일의 확장자를 구하기 위한 함수입니다.

• lastIndexOf() 함수는 배열에서 주어진 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 찾을 수 없는 경우 -1을 반환합니다.
• substring() 함수는 시작 인덱스부터 종료 인덱스 전까지 문자열을 반환합니다.
• toLowerCase() 함수는 소문자로 변환된 문자열의 값을 반환합니다.

+1을 해준 이유는 ".jpg" 로 값이 반환되기 때문에 한 칸 더 뒤에 "."을 포함하지 않는 jpg 값만 가져오기 위해서입니다.

	let ext = ""
	ext = getExtensionOfFilename(file.name)
	if (ext == "exe" || "txt" || "xls") {
		alert("첨부할 수 없는 파일을 업로드 하였습나다. (exe, txt, xls ..)")
		id_attach.value = ""
		return false
      }

JS에서 위와 같이 해주면 더 이상 2번 일을 하지 않기 때문에 효율적입니다.

마무리

다음 시간에는 게시판 글 목록을 출력해 보겠습니다.

감사합니다.