[JS] 파일 용량(사이즈) 체크, 변환하기

 

흔히 사용하는 데이터의 크기로는 KB, MB, GB 등이 있습니다. 이때 KB는 1,024Byte이고, MB는 1,024KB입니다.

 

html
<input type="file" name="file" onchange="fileSize(this)">

해당 코드와 같은 파일을 첨부하는 박스에서 파일을 선택하면 fileSize 함수로 해당 요소를 보내 선택한 파일 요소의 정보를 가져와 활용할 수 있습니다.

 

javascript
const fileSize = ($target) => {
  // 유저가 선택한 파일 가져오기
  const file = $target.files[0];
  
  // 해당 파일의 용량(사이즈) 정보
  console.log(file.size);
}

해당 코드로 파일의 정보를 가져올 수 있으며, File.size로 해당 파일의 바이트(Byte) 크기를 알 수 있습니다.

 

용량(사이즈) 변환하기

javascript
const getByteSize = (size) => {
  const byteUnits = ["KB", "MB", "GB", "TB"];

  for (let i = 0; i < byteUnits.length; i++) {
    size = Math.floor(size / 1024);

    if (size < 1024) return size.toFixed(1) + byteUnits[i];
  }
};

console.log(getByteSize(1024)); // 1KB
console.log(getByteSize(1024 ** 2)); // 1MB
console.log(getByteSize(1024 ** 3)); // 1GB
console.log(getByteSize(1024 ** 4)); // 1TB

각 데이터 크기는 1024의 제곱으로 표현할 수 있습니다.

1,024Byte는 1KB입니다. 1MB는 1,024KB이므로 1,024Byte(1KB)가 1024번 곱해진다고 생각하면 편합니다. (이는 제곱으로)

 

주어진 바이트 크기에서 계속 1024씩 나누면서 더 이상 나눈 값이 1024 보다 작으면 해당 반복문을 멈춥니다.

 

1024보다 작다는 것은 더 이상 현재 나뉜 데이터 크기보다 클 수 없다는 뜻이므로 해당 크기를 반환해줍니다. 

 

용량(사이즈) 체크하기

javascript
const size = 1024 ** 2 * 5; // 5KB

const maxSize = 1024 ** 2 * 2 // 2KB

if (maxSize < size) {
  alert("해당 파일은 제한된 용량을 초과하였습니다.");
}

파일의 용량(사이즈)을 체크, 비교하는 부분은 훨씬 간단합니다. 1024의 제곱으로 간단하게 데이터의 크기를 구분하고 제한할 용량을 지정하여 현재의 크기가 제한한 용량보다 큰지 비교해주면 됩니다.

 

javascript
const checkByteVali = (size, byte = "Byte", multiNum = 1) => {
  const unit = ["Byte", "KB", "MB", "GB", "TB"].indexOf(byte) + 1;

  const maxSize = Math.pow(1024, unit) * multiNum;

  return !unit || maxSize < size;
};

비교 후에 미리 배열에 사용할 데이터 크기를 지정해주고 indexOf 메서드로 몇의 제곱을 할지 찾아줍니다.

 

javascript
const size = 1024 ** 2 * 5;

if (checkByteVali(size, "KB", 10)) {
  alert("해당 파일은 제한된 용량을 초과하였습니다.");
}

if (checkByteVali(size, "KB", 3)) {
  alert("해당 파일은 제한된 용량을 초과하였습니다.");
}

그 후 위 코드와 같이 1024의 제곱으로 제한할 용량 수를 만들어 비교한 값을 반환해줍니다.