파일 업로드 및 다운로드 기능은 많은 웹 애플리케이션에서 필수적입니다. 그 중에서도 단일 파일의 업로드가 필요한 상황이 종종 있습니다. 이번에는 자바스크립트를 사용하여 파일 업로드 및 다운로드 시 단일 파일을 제한하는 방법에 대해 알아보겠습니다.
파일 업로드
HTML의 <input type="file"> 요소를 사용하여 파일을 업로드할 때, 다음과 같이 단일 파일 업로드 제한을 적용할 수 있습니다.
<input type="file" id="fileInput" accept=".pdf,.doc,.docx" onchange="validateFileUpload()">
accept 속성을 사용하여 허용할 파일 유형을 지정할 수 있습니다. 또한 아래와 같이 자바스크립트를 활용하여 업로드할 파일 수를 제한할 수 있습니다.
function validateFileUpload() {
const files = document.getElementById('fileInput').files;
if (files.length > 1) {
alert('한 번에 하나의 파일만 업로드할 수 있습니다.');
document.getElementById('fileInput').value = '';
}
}
validateFileUpload 함수는 파일을 선택한 후에 호출되며, 선택된 파일의 수가 1을 초과하는 경우 경고를 표시하고 파일 입력을 초기화합니다.
파일 다운로드
파일 다운로드 링크를 생성할 때에도, 동일한 제한을 적용할 수 있습니다.
<a href="download_file.pdf" download onclick="validateFileDownload()">다운로드</a>
다음과 같이 자바스크립트를 사용하여 파일 다운로드를 제한할 수 있습니다.
function validateFileDownload(event) {
if (document.getElementById('fileInput').files.length > 1) {
event.preventDefault();
alert('한 번에 하나의 파일만 다운로드할 수 있습니다.');
}
}
validateFileDownload 함수는 파일 다운로드 링크를 클릭할 때 호출되며, 선택된 파일의 수가 1을 초과하는 경우 기본 동작을 중지하고 경고를 표시합니다.
마무리
이제 단일 파일 업로드 및 다운로드를 자바스크립트를 사용하여 제한하는 방법에 대해 알아보았습니다. 이를 활용하여 웹 애플리케이션에서 사용자가 여러 개의 파일을 업로드하거나 다운로드하는 경우를 방지할 수 있습니다.
위의 코드 예제는 JavaScript와 HTML을 사용하여 파일 업로드 및 다운로드 시 단일 파일을 제한하는 방법을 보여주고 있습니다.
참고 자료
이상으로 파일 업로드 및 다운로드를 제한하는 방법에 대해 알아보았습니다. 더 궁금한 점이 있으시면 언제든지 물어보세요!