파일 업로드 및 다운로드 기능을 구현할 때, 사용자가 업로드하거나 다운로드할 수 있는 파일의 크기를 제한해야 할 때가 있습니다. 이 포스트에서는 자바스크립트를 사용하여 파일 크기를 제한하는 방법에 대해 살펴보겠습니다.
파일 업로드 시 파일 크기 제한하기
사용자가 업로드할 파일의 크기를 제한하려면, 파일 선택(input) 요소의 change 이벤트를 이용하여 업로드하려는 파일의 크기를 확인해야 합니다.
아래는 HTML 파일 업로드 요소와 자바스크립트를 사용하여 파일 크기를 제한하는 간단한 예제입니다.
HTML:
<input type="file" id="fileInput">
자바스크립트:
let fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function() {
let fileSize = this.files[0].size; // 파일의 크기 (바이트)
let maxSize = 1048576; // 1MB를 바이트로 표현한 값
if (fileSize > maxSize) {
alert('파일 크기가 너무 큽니다. 1MB 이하의 파일만 업로드할 수 있습니다.');
this.value = ''; // 파일 선택 취소
}
});
위의 예제는 파일 업로드 시 파일 크기를 1MB로 제한하는 방법을 보여줍니다. 파일 크기를 바이트 단위로 제한할 수 있으며, 이를 통해 사용자가 업로드할 수 있는 파일의 크기를 제한할 수 있습니다.
파일 다운로드 시 파일 크기 제한하기
파일 다운로드 시에도 파일 크기를 제한해야 할 때가 있습니다. 서버로부터 다운로드할 파일의 크기를 미리 확인하여 사용자에게 경고를 표시하거나 다운로드를 취소할 수 있습니다. 다음은 자바스크립트를 사용하여 파일 다운로드 시 파일 크기를 제한하는 예제입니다.
자바스크립트:
function downloadFile(url) {
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.blob();
})
.then(blob => {
if (blob.size > 1048576) {
alert('다운로드할 파일의 크기가 너무 큽니다. 1MB 이하의 파일만 다운로드할 수 있습니다.');
} else {
let anchor = document.createElement('a');
anchor.href = window.URL.createObjectURL(blob);
anchor.download = 'file.png';
anchor.click();
}
})
.catch(error => {
console.error('Error:', error);
});
}
// 파일 다운로드 버튼 클릭 시 다운로드 수행
document.getElementById('downloadButton').addEventListener('click', function() {
downloadFile('https://www.example.com/file.png');
});
위의 예제는 fetch를 사용하여 파일의 크기를 확인하고, 크기가 제한을 초과할 경우에는 경고를 표시하고 그렇지 않을 경우에는 파일을 다운로드하는 방법을 보여줍니다.
파일 업로드 및 다운로드 중 파일 크기를 제한하는 것은 사용자 경험을 개선하고 서버 자원을 보호하는 데 중요한 요소입니다. 위의 예제는 간단한 구현 예시일 뿐, 실제 프로젝트에서는 보안 및 성능 측면을 고려하여 파일 크기 제한을 구현해야 합니다.
마지막으로, 파일 크기 제한은 클라이언트 측에서만 이루어지는 것이 아니라 서버 측에서도 추가적으로 검사하는 것이 바람직합니다.